xhr.send(fd);
}
这里用的关键方法是canvas.toDataURL
XML/HTML Code复制内容到剪贴板
canvas.toDataURL(type, encoderOptions);
官方的说明是The
method returns a data URI containing a representation of the image in the format specified by the HTMLCanvasElement.toDataURL()
type parameter (defaults to PNG). The returned image is in a resolution of 96 dpi.实际上就是读取canvas画布上图片的数据。其默认是png格式，如果第一个参数type是image/jpeg的话，第二个参数encoderOptions就可以用来设置图片的压缩质量，经过测试，如果是png格式，100%的宽高经过该方法还有可能使图片变大~~~~适得其反，所以我们可以在canvas.drawImage的时候适当设置sWidth和sHeight，比如同比例缩小1.5倍等，图片质量其实并不太影响查看，尤其对尺寸比较大的图片来说。上面还有比较陌生的方法atob，其作用是做解码，因为图片格式的base64.
XML/HTML Code复制内容到剪贴板
var encodedData = window.btoa("Hello, world"); // encode a string
var decodedData = window.atob(encodedData); // decode the string
该方法解码出来可能是一堆乱码，Uint8Array返回的是8进制整型数组。
Blob是存储二进制文件的容器，典型的Blob对象是一个图片或者声音文件，其默认是PNG格式。
XML/HTML Code复制内容到剪贴板
var blob = new Blob([ia], {
type: "image/jpeg"
});
最后通过ajax将Blob对象发送到server即可。
整个流程大致如上，但是~~~实现以后测试跑来说：“你不是说图片压缩了吗，为什么图片还是上传那么慢！”，哥拿起手机对妹纸演示了一下，明明很快嘛，于是反道“是你手机不行或者网络不好吧，你下载图片看明明变小了，比之前肯定快，你看我秒传”。呵呵，说归说，还是偷偷检查代码，在浏览器中打时间log，对比没压缩之前的，尼玛！！！居然才快了几百毫秒！！折腾了半天，之前的代码也重构了，玩我呢。
细心的大神看了上面的代码估计能猜出问题在哪，没错，获取本地图片长宽尺寸的时候出了问题。
我去，获取本地4M大小的图片尺寸花了3174ms！！，图片越大时间也越久~
JavaScript Code复制内容到剪贴板
image.onload = function() {
