前端使用canvas壓縮並在線預覽圖片

時間 2019-11-08

標籤前端使用 canvas 壓縮在線預覽圖片简体版

原文原文鏈接

<!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>Document</title>
</head>
<body>
    <input id="file" type="file">
    <img src="" alt="" id="viewImg">
</body>
</html>
<script type="text/javascript">
    var eleFile = document.querySelector('#file');
    // 壓縮圖片須要的一些元素和對象
    var reader = new FileReader(),
    //建立一個img對象
        img = new Image();

    // 選擇的文件對象
    var file = null;

    // 縮放圖片須要的canvas
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');

    // base64地址圖片加載完畢後
    img.onload = function() {
        // 圖片原始尺寸
        var originWidth = this.width;
        var originHeight = this.height;
        // 最大尺寸限制，可經過國設置寬高來實現圖片壓縮程度
        var maxWidth = 800,
            maxHeight = 800;
        // 目標尺寸
        var targetWidth = originWidth,
            targetHeight = originHeight;
        // 圖片尺寸超過800x800的限制
        if(originWidth > maxWidth || originHeight > maxHeight) {
            if(originWidth / originHeight > maxWidth / maxHeight) {
                // 更寬，按照寬度限定尺寸
                targetWidth = maxWidth; //800
                targetHeight = Math.round(maxWidth * (originHeight / originWidth)); //664
            } else {
                targetHeight = maxHeight;
                targetWidth = Math.round(maxHeight * (originWidth / originHeight));
            }
        }
        // canvas對圖片進行縮放
        canvas.width = targetWidth;
        canvas.height = targetHeight;
        // 清除畫布
        context.clearRect(0, 0, targetWidth, targetHeight);
        // 圖片壓縮
        context.drawImage(img, 0, 0, targetWidth, targetHeight);
        /*第一個參數是建立的img對象；第二個參數是左上角座標，後面兩個是畫布區域寬高*/
        //壓縮後的圖片base64 url
        /*canvas.toDataURL(mimeType, qualityArgument),mimeType 默認值是'image/jpeg';
         * qualityArgument表示導出的圖片質量，只要導出爲jpg和webp格式的時候此參數纔有效果，默認值是0.92*/
        var newUrl = canvas.toDataURL('image/jpeg', 0.92);//base64 格式
        // console.log(canvas.toDataURL('image/jpeg', 0.92));
// 　　　　　　　　　　preview.style.backgroundImage='url(' + newUrl + ')';
       
        document.getElementById("viewImg").src=newUrl
    };

    // 文件base64化，以便獲知圖片原始尺寸
    reader.onload = function(e) {
        img.src = e.target.result;
        // document.getElementById("viewImg").src=e.target.result
    };
    eleFile.addEventListener('change', function(event) {
        file = event.target.files[0];
        console.log(file)
        // 選擇的文件是圖片
        if(file.type.indexOf("image") == 0) {
            reader.readAsDataURL(file);
        }
    });
</script>

相關標籤/搜索

每日一句

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