怎麼用Canvas壓縮圖片

這次帶怎麼用Canvas壓縮圖片給大家？用Canvas壓縮圖片 的注意事項有哪些，以下就是實戰案例，一起來看一下。

一、本機圖片輸入

1. 取得本機檔案

<!--HTML-->
<input type="file" id="choose-img" />

// JS
var chooseImg = document.getElementById("choose-img");
chooseImg.onchange = function(e){
    var file = this.files[0];
    // ……  （省略部分代码后续依次展示，下同）
};

很簡單，就是透過type類型為file的按鈕來取得本地文件。

2. 判斷所取得的本機檔案類型

<!--HTML-->
<div id="result"></div>

// JS
var result = document.getElementById("result");    // 用于显示图片输出结果，或者错误提示
if(/image/.test(file.type)){     // 判断文件类型是否为图片
    // ……
}
else{
    result.innerHTML = &#39;<span style="color: red;">文件类型有误！</span>&#39;;
}

#3. 將所取得的本機圖片以base64格式輸出

var img = new Image(),      // 创建图片对象，用于放置原始图片
    reader = new FileReader();
reader.readAsDataURL(file);    // 以base64格式读取并存入FileReader对象的result属性中
reader.onload = function(){
    img.src = this.result;   // 将图片base64字符串直接赋予Image对象的src中
    document.body.insertBefore(img,chooseImg);   // 将输出的图片插入到文件按钮之前
    img.onload = function(){
        // ……
    };
};

二、在Canvas畫布中繪製圖片

1. 建立畫布

var canvas = document.createElement('canvas');
canvas.width = img.clientWidth;
canvas.height = img.clientHeight;
var context = canvas.getContext('2d');

#注意：畫布大小與所輸入圖片寬高相同。

2. 繪製圖片

r​​rreee

三、壓縮圖片並輸出

context.drawImage(img,0,0,canvas.width,canvas.height);

經過測試發現，透過Canvas壓縮JPEG格式圖片效果最佳，PNG壓縮效果不明顯，有時反而變得更大。

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關讀取：

H5的區塊層級標籤總和

H5的進階段內嵌標籤

怎麼使用H5呼叫相機

以上是怎麼用Canvas壓縮圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章！