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截取或者压缩图片的方法，基本思路是：

1. 传入一个图片地址或者是base64图片。
2. 分别新建一个canvas和img的dom对象
3. 固定canvas元素的长宽（重要！必须！否则截图为空）
4. 获得上下文getContext使用2d截图
5. 接下来需要一个异步回调，等待img onload结束
6. drawImage（绘制新图）和toDataURL（返回base64）放在onload中

关于drawImage压缩和截图：
http://www.w3school.com.cn/tags/canvas_drawimage.asp

总结：图片加载使用异步，使用onload等待其加载完后再进行drawImage，否则图片都没有加载出来，怎么绘制新图？！