前端服务器图片链接地址url 转化为 File 对象（适合用于图片更新编辑的时候）

最新推荐文章于 2024-09-23 16:07:08 发布

原创

最新推荐文章于 2024-09-23 16:07:08 发布

· 2.6k 阅读

5 ·

版权

本文介绍了一种将前端服务器图片链接转换为File对象的方法，适用于图片更新编辑场景。首先，通过设置img标签并利用img.onload事件获取File对象。接着，将图片链接转化为canvas并进一步转化为base64，然后转换为Blob，最后转化为File对象。关键点包括设置跨域属性以避免错误，以及正确处理img.onload的异步性质。

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

思路：

第一步：页面上需要一个不带src 的 img标签

  <img id="img" crossOrigin="anonymous" v-show="false" />

v-show（display:none）是为了让其加载但是不显示出来，触发后续的 img.onload事件

第二步：设置img标签，在img.onload事件中获取 file对象

export function urltoFile(imgUrl, imageName) {
  var image = new Image()
  image.setAttribute('crossOrigin', 'Anonymous')
  image.src = imgUrl
  image.onload = function() {
    var base64 = getBase64Image(image)
    document.getElementById('img').src = base64
    //转换base64到file
    var file = btof(base64, imageName)
    console.log('xxxx', file)
    return file
  }
}

第三步：

图片的链接地址转化为File对象，需要先转化为canvas，再转化为base64图片