从dom 图片转换到file对象

最近公司接入另一个公司的jsSDK来做一个简易的图片编辑器,
麻烦的是在设定编辑器的图片时只留了两个接口,一个是传入图片
的线上地址,另一个是传入图片的file对象,考虑到每更换一张
图片就上传服务器的性能和流量消耗,决定还是传入file对象,
那么问题来了,如何将调用原生Scheme获得的本地图片路径转化为file对象?
流程:
路径→ dom img标签 → canvas画出该图 →调用canvas的方法生成base64编码 → 将编码转换成file对象
具体代码:
html:
    <img id="canvasImg" src=""/>
   <canvas id="mycanvas">canvas>
 css:(这里不需要显示img和canvas元素,他们只是一个过渡工具)
    #canvasImg {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
      visibility: hidden;
    }

    #mycanvas {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
      visibility: hidden; 
    }

js:

var util = {
  pathToFile: function(path) {
      var canvasImg = document.getElementById("canvasImg");
      var mycanvas = document.getElementById("mycanvas");
      canvasImg.src = path;
      var that = this;
      //更换图片src时,要等图片加载完后再进行下一步操作
      canvasImg.onload = function() {
        //一定要等图片加载后再获得图片的大小,这样获得的就是图片的原生大小
        //这里除以10 是因为图片较大的时候转换过程会变慢,但是图片会压缩
        //canvas大小要和图片大小一样
        var imgWidth = Math.round(canvasImg.width/10);
        var imgHeight = Math.round(canvasImg.height/10);
        mycanvas.setAttribute('width',imgWidth);
        mycanvas.setAttribute('height',imgHeight);
        var ctx = mycanvas.getContext("2d");
        ctx.drawImage(canvasImg, 0, 0, imgWidth, imgHeight);
        var uricode = mycanvas.toDataURL("images/png",1.0);
        var blobs = that.urltoblob(uricode);
        var namestr = that.workname + ".png";
        var file = that.blobToFile(blobs,namestr);
        that.editor.setImage(file);
      }
    },
    urltoblob: function(dataURL){
      var BASE64_MARKER = ';base64,';
      if (dataURL.indexOf(BASE64_MARKER) == -1) {
          var parts = dataURL.split(',');
          var contentType = parts[0].split(':')[1];
          var raw = decodeURIComponent(parts[1]);
          return new Blob([raw], {type: contentType});
      }
      var parts = dataURL.split(BASE64_MARKER);
      var contentType = parts[0].split(':')[1];
      var raw = window.atob(parts[1]);
      var rawLength = raw.length;
      var uInt8Array = new Uint8Array(rawLength);
      for (var i = 0; i < rawLength; ++i) {
          uInt8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uInt8Array], {type: contentType});
    },
    blobToFile: function(theBlob, fileName){
      theBlob.lastModifiedDate = new Date();
      theBlob.name = fileName;
      return theBlob;
    }
}

完成!

你可能感兴趣的:(技术总结,img,blob,file)