HTML下载生成WORD ，导出图片不能正常显示问题解决办法

（1）下面是网络上普遍出现的代码，代码本身没问题，但是会出现导出图片不显示，最有可能出现的现象是第一次导出不显示，导出多次后可能图片显示

（2）问题原因：看这两行代码

canvas.getContext("2d").drawImage(Img, 0, 0, width, height); //将图片绘制到canvas

dataURL = canvas.toDataURL("image/" + ext, quality); //转换图片为dataURL

canvas在绘图的过程中将图片数据转成base64格式，图片加载时间相对较长，会有个向缓存写的过程，在循环加载图片的过程中，当前图片加载还未完成，又循环到加载下个图片，下载生成word就会图片不显示，多次下载后，缓存已经加载到数据，下载生成word又会显示图片。

(3)解决问题办法：抱歉大家，我是后端工程师，无代码粘贴，只提供解题思路

1.使用定时器，提前将图片数据转成base64

2.使用阻塞同步的方式，让当前一个图片绘制成功，再循环绘制下一个图片

（4）网上普遍写法示例（会出图片不显示问题）

//如果导出Word得图片不能正常显示 解决方案
//将图片URL路径改为下面方式
$(function () {
    changeImgToDataurl()
})
function changeImgToDataurl() {
    let currentConatiner = document.getElementById("route");
      var regularImages = currentConatiner.querySelectorAll("img");
      for (var i = 0; i < regularImages.length; i++) {
        var imgURL = regularImages[i].currentSrc;
        this.getBase64(imgURL, regularImages[i]);
      }
}
function getBase64(url, charImg) {
    var Img = new Image();
    Img.crossOrigin = "Anonymous";//跨域必须使用，且后台也得设置允许跨域
    dataURL = '';
    Img.src = url;
    Img.onload = function () { //要先确保图片完整获取到，这是个异步事件
        var canvas = document.createElement("canvas"), //创建canvas元素
          width = Img.width, //确保canvas的尺寸和图片一样
          height = Img.height;
        canvas.width = width;
        canvas.height = height;
        canvas.getContext("2d").drawImage(Img, 0, 0, width, height); //将图片绘制到canvas
        //图片后缀名
        let ext = Img.src.substring(Img.src.lastIndexOf(".") + 1).toLowerCase();
        //图片质量
        let quality = 0.8;
        //转成base64
        dataURL = canvas.toDataURL("image/" + ext, quality); //转换图片为dataURL
        this.condataurl(dataURL, charImg); //调用回调函数
    };
}
function condataurl(dataURL, charImg) {
    charImg.src = dataURL;
}