从dom 图片转换到file对象

最新推荐文章于 2024-05-31 18:11:37 发布

happyElina

最新推荐文章于 2024-05-31 18:11:37 发布

阅读量8.1k

点赞数

分类专栏：技术总结文章标签： img blob file

本文链接：https://blog.youkuaiyun.com/happyElina/article/details/53556260

版权

技术总结专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何使用JavaScript将DOM中的图片元素转换为File对象，这对于文件操作和上传等场景非常关键。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近公司接入另一个公司的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;
    }
}

完成！