图片预览
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>图片预览</title> <script> function tobin(target){ var url = window.URL.createObjectURL(target.files.item(0)); var img = new Image(); img.src = url; var Image= document.getElementById('you'); var can = document.createElement('canvas'); var context = can.getContext('2d'); img.onload = function(){ var nw = img.naturalWidth; var nh = img.naturalHeight; can.setAttribute('width', nw+'px'); can.setAttribute('height', nh+'px'); context.drawImage(img,0,0,nw,nh); //二进制流 var bin = can.toDataURL('image/jpeg'); Image.src = bin; } } </script> </head> <body> <input type="file" onchange="tobin(this)"> <hr> <img src="" alt="图片" width="320px" id="you"> </body> </html>