JavaScript实现将图片地址转成文件流并上传_Javascript

写在开头

最近，小编在业务中遇到一个图片转存的场景。

领导：大概过程就是，接口会给我返回一个图片列表数据，图片路径是全路径，但是路径中的域名是其他系统的，必须要在用户选择图片的时候将图片重新转存到自个的系统上，防止其他系统删除图片对此有影响。

我：em...很合理的需求。

（但是，和有什么关系？我只是一个前端小菜鸡呀，不祥的预感.......）

我：（卑微提问）这个过程不是放后端做比较合理一点？

后端大哥：前端不能做？

我：可以可以，只是...这个好像会跨域？

后端大哥：已经配置了请求头（'access-control-allow-origin': '*'）。

我：哦，好的，我去弄一下。（*******此处省略几万字心理活动内容）

第一种（推荐）

那么，迫于......不，我自愿的，我们来看看前端要如何完成这个转成过程，代码比较简单，直接贴上来瞧瞧：

async function imagetostorage(path) {
  // 获取文件名
  const startindex = path.lastindexof('/');
  const endindex = path.indexof('?');
  const imgname = path.substring(startindex + 1, endindex);
  // 获取图片的文件流对象
  const file = await getimgtofile(path, imgname);
  // todo: 将file对象上传到其他接口中
}

/**
 * @name 通过fetch请求文件，将文件转成文件流对象
 * @param { string } path 文件路径全路径
 * @param { string } filename 文件名
 * @returns { file | undefined }
 */
function getimgtofile(path, filename) {
  const response = await fetch(path);
  if (response) {
    const blob = await response.blob();
    const file = new file([blob], filename, { type: blob.type });
    return file;
  }
}

上述方式，在后端配置了允许跨域后，正常是没有什么问题的，也是比较好的一种方式了。

但是，在小编实际第一次编码测试后，却还是遇上了跨域。

一猜应该就是后端实际还没配置好，问了一下。

后端大哥：还没部署，一会再自己试试。

我：嗯嗯。

第二种

等待的过程，小编又在网上找了找了，找到了第二种方式，各位看官可以瞧瞧：

/** @name 将图片的网络链接转成base64 **/
function imageurltobase64(imageurl: string, filename: string): promise<file> {
    return new promise(resolve => {
      const image = new image();
      // 让image元素启用cors来处理跨源请求
      image.setattribute('crossorigin', 'anonymous'); 
      image.src = imageurl + '&v=' + math.random();
      image.onload = () => {
        const canvas = document.createelement('canvas');
        canvas.width = image.width;
        canvas.height = image.height;
        const context = canvas.getcontext('2d')!;
        context.drawimage(image, 0, 0, image.width, image.height);
        // canvas.todataurl
        const imagebase64 = canvas.todataurl('image/jpeg', 1); // 第二个参数是压缩质量
        // 将图片的base64转成文件流
        const file = base64tofile(imagebase64, filename);
        resolve(file);
      };
    });
  }
  /** @name 将图片的base64转成文件流 **/
function base64tofile(base64: string, filename: string) {
    const basearray = base64.split(',');
    // 获取类型与后缀名
    const mime = basearray[0].match(/:(.*?);/)![1];
    const suffix = mime.split('/')[1];
    // 转换数据
    const bstr = atob(basearray[1]);
    let n = bstr.length;
    const u8arr = new uint8array(n);
    while (n--) {
      u8arr[n] = bstr.charcodeat(n);
    }
    // 生成文件流
    const file = new file([u8arr], `${filename}.${suffix}`, {
      type: mime,
    });
    return file;
}

这第二种方式由于要先把图片绘制到 canvas 再去转成 base64 再去转成文件流，小编用 console.time 稍微测了一下，每次转化过程都要几百毫秒，图片越大时间越长，挺影响性能的。

所以，小编还是推荐使用第一种方式，当然，最稳妥的方案是后端去搞最好了。

网上很多都说第二种方式可以直接绕过跨域，各种谈论。

主要就是这个 crossorigin 属性。mdn解释

它原理是通过了 cors