以前写过1篇相关Canvas照片解决的文章内容，今日大家讲讲怎样应用Canvas来缩小照片。
Canvas照片缩小步骤
接下来我将以实际案例为大伙儿解读Canvas照片缩小的实际步骤。
1、当地照片键入
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(){
// ……
};
};
2、在Canvas画布中绘图照片
1. 建立画布
var canvas = document.createElement('canvas');
canvas.width = img.clientWidth;
canvas.height = img.clientHeight;
var context = canvas.getContext('2d');
留意：画布尺寸与所键入照片宽高同样。
2. 绘图照片
context.drawImage(img,0,0,canvas.width,canvas.height);
3、缩小照片并輸出
<!--HTML--> 照片缩小比率 : <input id="rate" type="number" min="0" max="100" /> %
// JS
var rate = document.getElementById("rate").value || 100; // 键入照片缩小比率，默认设置为100%
var imgUrl = canvas.toDataURL(file.type,rate/100); // 第1个主要参数为輸出照片种类，第2个为缩小比
result.innerHTML = '缩小后：<img src="'+ imgUrl +'" />'; // 将缩小后的照片置于result中显示信息
img.style.display = 'none'; // 将初始照片掩藏
将在Canvas画布中所绘图的照片再度以base64文件格式輸出。
4、详细编码展现
<!--HTML--> 照片缩小比率 : <input id="rate" type="number" min="0" max="100" /> % <input type="file" id="choose-img" /> <div id="result"></div>
// JS
var chooseImg = document.getElementById("choose-img"),
result = document.getElementById("result");
chooseImg.onchange = function(e){
var file = this.files[0];
if(/image/.test(file.type)){
var img = new Image(),
reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(){
img.src = this.result;
document.body.insertBefore(img,chooseImg);
img.onload = function(){
var canvas = document.createElement('canvas');
canvas.width = img.clientWidth;
canvas.height = img.clientHeight;
var context = canvas.getContext('2d');
context.drawImage(img,0,0,canvas.width,canvas.height);
var rate = document.getElementById("rate").value || 100;
var imgUrl = canvas.toDataURL(file.type,rate/100);
result.innerHTML = '缩小后：<img src="'+ imgUrl +'" />';
result.style.display = 'block';
img.style.display = 'none';
};
};
}
else{
result.innerHTML = '<span style="color: red;">文档种类有误！</span>';
}
};
经检测发现，根据Canvas缩小JPEG文件格式照片实际效果最好，PNG缩小实际效果不显著，有时反而变得更大。
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。