canvas处理图片后的小疑惑

Question

就是一个利用canvas压缩图片的小功能，代码如下：

function compressImg(url){

    var newimg=document.querySelector('.img');

    var dataUrl='';

    var size=url.length/1024-url.length/4096;

    var scale=500/size;

    if(size > 500){

        var img = new Image();

        img.src=url;

        var canvas=document.createElement('canvas');

        var ctx=canvas.getContext('2d');

        img.onload=function(){

            canvas.width=img.width;

            canvas.height=img.height;

            ctx.drawImage(img,0,0,canvas.width,canvas.height);

            dataUrl=canvas.toDataURL('image/jpeg',scale);

            //-----在此处可以正常获取压缩后的图片

        }

    }else{

        dataUrl=url

    }

           //------在此处打印dataUrl为''

     newimg.src=dataUrl;

}

当图片的大小大于500kb时，对图片进行压缩。在代码中用了一个变量dataUrl来保存图片，在实际操作过程中，发现当图片大于500kb时，得到的dataUrl=''，而在img.onload函数中可以正常获取dataUrl，这是什么原因呢？

为什么已经用变量保存了img加载完成的数据，为什么无法获取到？

Answer 1

img.onload是一个异步方法，所以需要在该方法中获取dataUrlfunction compressImg(url){    var newimg=document.querySelector('.img');    var dataUrl='';    var size=url.length/1024-url.length/4096;    var scale=500/size;    if(size > 500){        var img = new Image();        img.src=url;        var canvas=document.createElement('canvas');        var ctx=canvas.getContext('2d');        img.onload=function(){            canvas.width=img.width;            canvas.height=img.height;            ctx.drawImage(img,0,0,canvas.width,canvas.height);            dataUrl=canvas.toDataURL('image/jpeg',scale);            newimg.src=dataUrl;        }    }else{        newimg.src=url    }}