移动端Web上传图片

最近遇到了移动端图片上传以及上传前对图片的缩放,旋转,裁剪等功能的需求,查看了图片的裁剪和旋转的插件基本上适合PC端交互,只找到了一个 Cropper 还可以,看来有些交互要自己思考设计!

2016-04-14 【文件格式的转换,Base64 & Blob & File】

  1. javascript将base64编码的图片数据转换为file并提交

    测试chrome 浏览器,和iOS9.3 中可以(微信)【解决了canvas.toBlob()不支持问题】, 代码如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    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});
    }
  2. Creating a Blob from a base64 string in JavaScript

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    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

  1. Higher DPI graphics with HTML5 canvas
  2. HTMLCanvasElement.toDataURL()
  3. High DPI Canvas

2016-06-02 14:05:01

  1. 移动端图片上传的实践 总结的挺详细的

参考链接

  1. 移动端Web上传图片实践
  2. Canvas实例教程:图像移动、大小调整和裁剪

参考库

  1. canvasResize
  2. cropperjs

    without jQuery, 很强大的,API很清楚