js中用canvas生成固定長寬的圖片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div>原圖：</div> <input type="file" id="file1" onchange="showImg(this,'img1')" /> <img id="img1" /> <button type="button" onclick="genpic()">生成400x300大小的圖片</button> <hr /> <img id="img2" /> <script> var srcSize; //原圖大小 //上傳圖片後立即預覽 file對象,圖片容器id不h function showImg(fileObj, imgId) { var file = fileObj.files[0]; var r = new FileReader(); r.onload = function () { var fileContent = r.result; srcSize = (fileContent.length / 1024).toFixed(2); console.log(srcSize+'kb', '原圖大小',fileContent.length+"字節") document.getElementById(imgId).src = fileContent; } r.readAsDataURL(file); } //生成400x300大小的圖片 function genpic() { const img = document.getElementById('img1'); //生成固定長寬的圖片 const canvas = document.createElement('canvas'); canvas.width = 400; canvas.height = 300; const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, canvas.width, canvas.height); const dataUrl = canvas.toDataURL('image/jpeg'); document.getElementById('img2').src = dataUrl; alert("原圖大小：" + srcSize + "KB，生成的圖片大小：" + (dataUrl.length / 1024).toFixed(2) + "KB") } </script> </body> </html>
預想是用在h5上傳圖片的時候判斷圖片太大的話用canvas生成規定大小的圖片後再上傳的。。