深入研究HTML5实现图片压缩上传功能

在目标canvas上绘制图像的高度。 允许对绘制的图像进行缩放。 如果不说明， 在绘制时图片高度不会缩放。

sx

需要绘制到目标上下文中的，源图像的矩形选择框的左上角 X 坐标。

sy

需要绘制到目标上下文中的，源图像的矩形选择框的左上角 Y 坐标。

sWidth

需要绘制到目标上下文中的，源图像的矩形选择框的宽度。如果不说明，整个矩形从坐标的sx和sy开始，到图像的右下角结束。

sHeight

需要绘制到目标上下文中的，源图像的矩形选择框的高度。

为了上传完整的图片，这里dx,dy必须设置为0，dWidth和dHeight必须设置为原始图片的宽度和高度。这就是为什么我们需要等image对象下载完毕后获取其原始尺寸，这很关键！

3、图片上传

XML/HTML Code复制内容到剪贴板

function fileUpload() {   
     var data = canvas.toDataURL("image/jpeg", quality);   
     //dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了   
    datadata = data.split(‘,’)[1];   
    data = window.atob(data);   
    var ia = new Uint8Array(data.length);   
    for (var i = 0; i < data.length; i++) {   
          ia[i] = data.charCodeAt(i);   
    };   
     //canvas.toDataURL 返回的默认格式就是 image/png   
    var blob = new Blob([ia], {   
     type: "image/jpeg"   
    });   
    var fd = new FormData();   
        fd.append(‘myFile’, blob);   
    var xhr = new XMLHttpRequest();   
    xhr.addEventListener("load", opts.success, false);   
    xhr.addEventListener("error", opts.error, false);   
    xhr.open("POST", opts.url);