一、本地图片输入
首先，咱们得在网页上找张本地照片咋办嘞？这事儿简单！就在网页上弄个type=”file”的按钮，轻轻点一下就能在你电脑里一眼看到喜欢的图！这不就等于是给了你个篮子，让你把家里可爱的鸡蛋（图片）都扔进来，然后我们就可以开开心心地接住。
收到东西要好好看清楚免得出差错，比如有人想发照片结果选成文字文件。所以咱们要看好文件格式，像常见的jpg和png等规范一下。这就像买鸡蛋时挑选新鲜又干净、表面没损坏那样重要。
二、将本地图片转换成Base64格式
// JS
var chooseImg = document.getElementById("choose-img");
chooseImg.onchange = function(e){
var file = this.files[0];
// …… （省略部分代码后续依次展示，下同）
};
看好要拼接的图有木有弄错没问题的话就给它换个形象——转换为Base64格式！这么做其实就是将图片转换为一串码字，方便网络传输。简单来说，就是让大图缩小点，带着更轻松。
三、在Canvas画布中绘制图片
搞定64位码图片之后，咱们要做的就是把这个图放到Canvas画布上去展示！Canvas这东西就是个大白板，随心所欲，随便搞创作，堆出各种各样漂亮的图案。首先，先找个和咱的图片尺寸差不多的Canvas画布。这样一来，图片就能直接铺满整个画布，看着特爽！
搞定画布，咱们开干！这个和纸上创作差不多，不过这次是用代码做出来的。说简单点就是先把想画的图用Base64编码传给Canvas，然后它自己就画出图来了！
// JS
var result = document.getElementById("result"); // 用于显示图片输出结果，或者错误提示
if(/image/.test(file.type)){ // 判断文件类型是否为图片
// ……
}
else{
result.innerHTML = '文件类型有误！';
}
四、压缩图片并输出
搞定了，只要弄个图片处理下就好了，然后导出来。比调画布大小跟保存容易多了。Canvas里面压缩图片，我们可以JPEG或者PNG选一种，我试了，真的能省地方，还有变小。但是PNG有时候效果不好，甚至变得更大。
搞定图片压缩后就能直接上网看了，就像完成一幅画再拿给大家欣赏一样哦～
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(){
// ……
};
};
五、需要注意的小细节
别乱搞图片压缩注意两点就成：第一，画布大小一定得和原图对上号，不然画面看起来怪怪的；其次，就是压缩格式了。要是颜色很多就用JPEG，反之就选PNG！
六、实战案例分析
var canvas = document.createElement('canvas');
canvas.width = img.clientWidth;
canvas.height = img.clientHeight;
var context = canvas.getContext('2d');
别着急，咱们就看看几个实际例子，看看压缩前后有啥差别，你就能明白怎么用Canvas压缩图片，其实挺简单的！
七、总结与展望
看过文章和例子是不是觉得已经会在Canvas上压缩图片了？其实Canvas不仅能压缩图像，还能自由画图甚至制作小动画！而且听说未来可能还会有很多更酷炫的新功能诞生，真是让人心痒痒的想等着看！
context.drawImage(img,0,0,canvas.width,canvas.height);
评论0