html转pdf 图片跨域问题

217 阅读1分钟

原因:www.jianshu.com/p/8fa0fb53c…

解决方案:将图片url转为base64位格式

url转base64:

urlToBase64(url) {
      return new Promise ((resolve,reject) => {
          let image = new Image();
          image.onload = function() {
            let canvas = document.createElement('canvas');
            canvas.width = this.naturalWidth;
            canvas.height = this.naturalHeight;
            // 将图片插入画布并开始绘制
            canvas.getContext('2d').drawImage(image, 0, 0);
            // result
            let result = canvas.toDataURL('image/png')
            resolve(result);
          };
          // CORS 策略,会存在跨域问题https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror
          image.setAttribute("crossOrigin",'Anonymous');
          image.src = url;
          // 图片加载失败的错误处理
          image.onerror = () => {
            reject(new Error('图片流异常'));
};

获取到图片的url,调用这个方法

this.getDataUri(imgUrL).then(res => {
    // 转化后的base64图片地址
    console.log('base64', res)
})