使用canvas實現圖片預覽、縮放（壓縮）以及生成文件下載

時間 2020-06-17

標籤使用 canvas 實現圖片預覽縮放壓縮以及生成文件下載简体版

原文原文鏈接

參考javascript

https://www.runoob.com/html/html5-canvas.html https://www.cnblogs.com/yuanzhiguo/p/8288822.html https://www.cnblogs.com/goloving/p/8260206.html

工做中遇到的一個問題，手機端上傳圖片出現卡頓，經排查發現是圖片過大引發的。參考網上資料，整理出一個圖片壓縮（縮放）的demo頁面。css

demo包含圖片預覽，縮放以及生成文件下載三個功能，放在這裏備忘，有須要的朋友能夠拿去參考。html

canvas-preview-and-zoom.htmlhtml5

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>canvas 預覽和縮放</title>
        <style type="text/css"> .button { display: inline-block; padding: 0px; width: 45px; height: 25px; line-height: 25px; text-align: center; font-size: 16px; border: solid 1px; background: #e3e3e3;
            }
        </style>
    </head>
    <body>
        <div>
            <img style="width: 600px; height: 600px;" id="preview">
            <img style="width: 300px; height: 300px;" id="target">
        </div>
        <div>
            <input type="file" id="select" style="display: none;">
            <label for="select" class="button">選擇</label>
            <label type="button" id="zoom" class="button">縮放</label>
            <label type="button" id="download" class="button">下載</label>
        </div>
        <script type="text/javascript">
            var image = document.querySelector('#preview'); var reader = new FileReader(); // 預覽
 reader.onload = function(e) { image.src = e.target.result; } // 預覽
 document.querySelector('#select').addEventListener('change', function(event) { if (event.target.files.length == 0) { return; } file = event.target.files[0]; if (/^image\//.test(file.type)) { reader.readAsDataURL(file); } else { alert('請選擇圖片'); } }); // 縮放
            function zoomImage(img, width, height, quality) { var canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; var context = canvas.getContext('2d'); context.drawImage(img, 0, 0, width, height); return canvas.toDataURL('image/jpeg', quality); } // 縮放
 document.querySelector('#zoom').onclick = function() { var img64 = zoomImage(image, 300, 300, 1); document.querySelector('#target').src = img64; }; // 下載
 document.querySelector('#download').onclick = function() { var a = document.createElement('a'); a.href = document.querySelector('#target').src; a.download = 'zoom.jpg'; a.click(); a.remove(); } </script>
    </body>
</html>

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。