前端如何在浏览器端不通过用户操作的前提下读取图片

今天开发过程中遇到了一个问题，原本我们公司的业务有一块是根据数据生成文档然后交给用户，但是随着用户数量的增长，导致服务器压力也越来越大，于是我们决定将文件的生成交给客户端生成，然后再将文件传回给服务器端。

同时因为旧版使用的库功能缺陷，导致生成的docx文档丑陋，于是我们使用了docx库，在此之前我一直都是在node环境下进行测试，也没什么问题

但今天放在前端进行操作的时候，发现了一个难以解决的问题——如何读取本地需要用来作为文档中logo和背景图的资源

在node环境下可以通过node的内置库fs来进行文件的读取，原本以为通过常规引入即可，例如import，import()，require这些方法就可以解决，例如下图

// 引入静态资源
const images = import("@/assets/bgImg2.png");
const logo = import("@/assets/logo-big.png");
const logoSmall = import("@/assets/logo-small.png");
​
const images = require("@/assets/bgImg2.png");
const logo = require("@/assets/logo-big.png");
const logoSmall = require("@/assets/logo-small.png");
​
import images from "@/assets/bgImg2.png";
import logo from "@/assets/logo-big.png";
import logoSmall from "@/assets/logo-small.png";

但最后我发现他们得到的结果不是我预期中的File对象或者二进制数据 or Base64等用于描述文件数据的信息

输出结果是这样的

我想，不应该啊，我记得之前暑假遇到过一个问题，就是在动态生成图片的时候，当时因为路径问题不能通过vue的语法生成，后面是使用了require()来解决的，当时怎么能引入数据。

于是我上网查了很多方式

最后找到了两个解决的办法

方法一：通过网络请求获取资源

在网上我了解到，浏览器端是没有权限读取用户的本地资源的，除非通过类似于input标签让用户选择文件进行上传，然后通过FileReader对象读取一个File对象获取对应的数据，但是生成文档总不能还要用户自己从服务器下载图片然后从本地上传吧，不太现实，于是只能想想其他的方法

这个时候我发现我们上图的结果，貌似和我们引入的路径不一样，这路径看着像项目打包之后的路径，于是我试着发起请求，果然得到了对应的blod数据，这里附上代码

import images from "@/assets/bgImg2.png";
import logo from "@/assets/logo-big.png";
import logoSmall from "@/assets/logo-small.png";
​
import request from '@/utils/request';
​
// 使用原生请求图片
// function readFile(name) { // name为文件所在位置
//   let xhr = new XMLHttpRequest();
//   const okStatus = document.location.protocol === "file:" ? 0 : 200;
//   xhr.open('GET', name, false);
//   xhr.overrideMimeType("text/html;charset=utf-8");//默认为utf-8
//   xhr.send(null);
//   console.log(xhr.responseText);
//   return xhr.status === okStatus ? xhr.responseText : null;
// }
​
// 使用axios实例请求
function getLocalImg(absoluteAddress) {
  return request.get(absoluteAddress, {
    responseType: "blob"
  }).then((res) => {
    // 请求图片这里应该是不会走的
    return Promise.resolve(res);
  }, (res) => {
    return Promise.resolve(res);
  });
}

其中原生的方法来源于网上看到的一篇文章，点我查看原文

其中的name和absoluteAddress是我们上面引入的内容（images，logo，logoSmall）

注意，使用axios的时候别忘了配置responseType为blod，不然读取出来的res是blod的字符串，原生的应该也要配置，但我还没研究，有兴趣的可以研究一下相关请求头，应该不难。

这里then传入两个一样的方法是因为我们在响应拦截器中对响应的code做了限制，在使用axios请求非官方接口的时候都会报错，不过无碍，传出来就行

至此，就可以得到相应的数据了

方法二：通过image对象获取数据，然后通过canvas生成

    
imageUrlToBase64() {
      let image = new Image() // 一定要设置为let，不然图片不显示
      image.setAttribute('crossOrigin', 'anonymous') // 解决跨域问题
      // image.src = 'http://172.25.9.141:8089/images/rotation/379a713bb5cd4a82881870ac4b45bc5c.jpg' +"&v=" + Math.random() //网图，但是必须在同一个域内
      image.src = require('@/assets/login/demo.png') // 如果是本地图片替换为 image.src = imageUrl
      image.onload = () => {
        var canvas = document.createElement("canvas")
        canvas.width = image.width
        canvas.height = image.height
        var context = canvas.getContext('2d')
        context.drawImage(image, 0, 0, image.width, image.height)
        var quality = 0.8
        var dataURL = canvas.toDataURL("image/jpeg", quality) // 使用toDataUrl将图片转换成jpeg的格式,不要把图片压缩成png，因为压缩成png后base64的字符串可能比不转换前的长！
        this.base64toFile(dataURL)
      }
    },
        
    base64toFile(dataurl, filename = 'file') {
      let arr = dataurl.split(',')
      let mime = arr[0].match(/:(.*?);/)[1]
      let suffix = mime.split('/')[1]
      let bstr = atob(arr[1])
      let n = bstr.length
      let u8arr = new Uint8Array(n)
​
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
​
      let file = new File([u8arr], `${filename}.${suffix}`, {
        type: mime
      })
      console.log(file) //等同于用el-upload上传的file.raw
    },
​

这种方法没尝试过，不知道可不可行，但既然发出来了应该就是ok的，太复杂了我看不懂，有兴趣的自己看看吧

原文地址

我当然还是推荐第一种，简单易懂，而且不依赖vue项目下的require方法，哪怕是自己纯手写的web项目中使用原生的浏览器端js也可以用

最后的话

喜欢的话点个赞+收藏，哦豁，下班！周末快乐！