我们经常遇到这样的情况，我们填写某个表单【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】的时候，需要上传一张图片，但是我们的业务原创内容，盗版必究。本文作者：唐霜，转载请注明出处。会有这样一个逻辑，我们这个表单会默认拉取【版权所有，侵权必究】【本文首发于唐霜的博客】一些数据进行填充，用户在这些数据基础上进【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】行修改，这些拉取的数据，有的时候会使用外【本文受版权保护】著作权归作者所有，禁止商业用途转载。部数据里面的图片，此时，我们需要把外部数转载请注明出处：www.tangshuang.net【版权所有，侵权必究】据里面的图片保存到我们自己的服务器。这种本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。情况有两种解决方案，一种是纯后端做，一种本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】是前端来做。我分享一种前端来做的方案。

其实拉取数据进行填充的本质，就是不破坏我本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。们原有的表单交互流程，前后端保持高度一致本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】，避免多态。一般的交互是提交表单的时候提【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】交上传图片，把上传后得到的文件 id 同本文版权归作者所有，未经授权不得转载。【转载请注明来源】表单数据一起保存。这个过程是比较顺畅的，转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。前后端理解起来非常简单。但是，如果这里强原创内容，盗版必究。【作者：唐霜】行改变这个逻辑，为了兼容多态，后端支持传未经授权，禁止复制转载。【原创内容，转载请注明出处】 url 字符串，实际上，这也会给前端带转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net来比较大的处理量。因此，我们的目标是，利本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。用图片 url 转化为本地的 File 著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net再提交到后端，走一个简单的流程，只不过在转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net拉取数据这一步做一个处理。

那么，怎么把外部图片转化为一个浏览器里面著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】的 File 呢？

function getImageFile(src) {
    return new Promise((resolve, reject) => {
      const img = document.createElement('img');
      img.style.position = 'fixed';
      img.style.top = '-10000px';
      img.crossOrigin = 'anonymous';
      img.src = src;
      img.onload = () => {
        const canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        const context = canvas.getContext('2d');
        context.drawImage(img, 0, 0);
        canvas.toBlob((blob) => {
          // @ts-ignore
          // eslint-disable-next-line no-param-reassign
          blob.lastModifiedDate = new Date();
          const name = src.split('/').pop();
          // @ts-ignore
          // eslint-disable-next-line no-param-reassign
          blob.name = name;
          const file = new File([blob], name, { type: blob.type });
          resolve(file);
        });
        document.body.removeChild(img);
      };
      img.onerror = (e) => {
        document.body.removeChild(img);
        reject(e);
      };
      document.body.appendChild(img);
    });
  }

这里用到了以下知识点：【未经授权禁止转载】

• 由于是跨域的图片，所以不能直接通过 fe【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。tch 来得到 blob，于是我们利用 本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。canvas 来加载远程图片，再利用 c著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】anvas 的接口来转化数据类型
【本文受版权保护】【原创不易，请尊重版权】【本文受版权保护】
• canvas 要能够 draw 远程图片未经授权，禁止复制转载。未经授权，禁止复制转载。，必须加上 crossOrigin = 【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】anonymous
【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】
• 通过 toBlob 之后得到 blob，著作权归作者所有，禁止商业用途转载。【本文受版权保护】再使用 new File([blob])【作者：唐霜】【转载请注明来源】 就可以把 blob 转化为一个本地的文【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。件，用在提交中
本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。
• 最后需要注意，提交文件需要使用 cont本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】ent-type: multipart/【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。form-data 进行提交
【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。

通过这个处理，我们就可以在浏览器里面把外【转载请注明来源】【版权所有，侵权必究】部图片转化为内部图片进行使用，这样就节省【作者：唐霜】【版权所有】唐霜 www.tangshuang.net了后端去做类似回源CDN之类的建设。