Canvas DrawImage截取和压缩图片的陷阱
html5的canvas十分之强大,可以做到快速的截取压缩出新的图片!
不过最近开发过程中遇到一个问题,图片压缩后使用toDataURL取得图片显示为一片漆黑,什么都没有!
折腾了很久,起初以为是上传问题,base64可能太长被截断了,后来有考虑是不是手机webview不支持canvas,总之最后百度了,发现webkit加载图片是异步的。。。终于恍然大悟,上js回调大法
//图片压缩函数,i为图片(base64格式或图片路径均可),w为压缩宽度,h为压缩高,img读取时异步的,返回处理base64图片的回调
owner.zipBaseImg = function(i, w, h, callback) {
w = w || 100;
h = h || 100;
var img = document.createElement("img"); //创建临时图片
img.src = i;
var canvas = document.createElement("canvas"); //创建临时画布
canvas.width = w;
canvas.height = h;
var ctx = canvas.getContext("2d");
img.onload = function() { //监听到图片加载结束,再压缩图片!
ctx.drawImage(img, 0, 0, w, h); //传入临时图片
if(callback && typeof callback == "function")
return callback(canvas.toDataURL("image/jpeg", 1)); //第二个参数是质量
};
}
以上是使用canvas截取或者压缩图片的方法,基本思路是:
- 传入一个图片地址或者是base64图片。
- 分别新建一个canvas和img的dom对象
- 固定canvas元素的长宽(重要!必须!否则截图为空)
- 获得上下文getContext使用2d截图
- 接下来需要一个异步回调,等待img onload结束
- drawImage(绘制新图)和toDataURL(返回base64)放在onload中
关于drawImage压缩和截图:
http://www.w3school.com.cn/tags/canvas_drawimage.asp
总结:图片加载使用异步,使用onload等待其加载完后再进行drawImage,否则图片都没有加载出来,怎么绘制新图?!