這次帶怎麼用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 = '<span style="color: red;">文件类型有误！</span>';
}#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. 繪製圖片
rrreee三、壓縮圖片並輸出
context.drawImage(img,0,0,canvas.width,canvas.height);
經過測試發現，透過Canvas壓縮JPEG格式圖片效果最佳，PNG壓縮效果不明顯，有時反而變得更大。
相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關讀取：
以上是怎麼用Canvas壓縮圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章！
