最近遇到了移动端图片上传以及上传前对图片的缩放，旋转，裁剪等功能的需求，查看了图片的裁剪和旋转的插件基本上适合PC端交互，只找到了一个 Cropper 还可以，看来有些交互要自己思考设计！
2016-04-14 【文件格式的转换，Base64 & Blob & File】
- javascript将base64编码的图片数据转换为file并提交
测试chrome 浏览器，和iOS9.3 中可以（微信）【解决了canvas.toBlob()不支持问题】, 代码如下：
convertBase64UrlToBlob: function (urlData, type){
contentType = type || '';
var bytes=window.atob(urlData.split(',')[1]); //去掉url的头，并转换为byte
//处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob( [ab] , {type : contentType});
} - Creating a Blob from a base64 string in JavaScript
function b64toBlob(b64Data, contentType, sliceSize) {
contentType = contentType || '';
sliceSize = sliceSize || 512;
var byteCharacters = atob(b64Data);
var byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);
var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
var blob = new Blob(byteArrays, {type: contentType});
return blob;
}结合第一段代码可以发现，window.atob(b64Data.split(‘,’)[1]), 要去掉url的头，而且代码看起来更健壮！
2016-04-20 20:17
修改canvas.toDataURL() 默认的截图是96dpi 怎么调高dpi
2016-06-02 14:05:01
- 移动端图片上传的实践 总结的挺详细的
参考链接
参考库
-
without jQuery, 很强大的，API很清楚