使用html2Canvas生成图片跨域如何处理？

Posted 2023-03-15

参考技术A 1.出现跨域的情况

这种情况只会出现在html2Canvas需生成的海报中的图片与当前环境不在同一个域下

2.解决方案

处理跨域，将接口返回的url处理为base64再进行处理或者后端直接返回base64

3.如何将url转换为base64？（利用canvas的toDataURL属性将url转为base64）

  function getImageBase64Data(imgSrc) 

    function getBase64(img) 

      let canvas = document.createElement("canvas");

      canvas.width = img.width;

      canvas.height = img.height;

      let ctx = canvas.getContext("2d");

      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

      let dataURL = canvas.toDataURL('image/jpeg');

      return dataURL;

    

    let baseUrl = new Promise(function (resolve, reject) 

      let image = new Image();

      image.crossOrigin = '*'; // 图片处理跨域

      if (imgSrc.indexOf('data:image/jpeg;base64') > -1) 

        image.src = imgSrc + '?v=' + Math.random(); // 处理图片从缓存获取

       else 

        image.src = imgSrc;

      

      image.onload = function () 

        let imageBase64Data = getBase64(image);

        resolve(imageBase64Data);

      

    );

    return baseUrl;

  

4.使用html2Canvas生成海报

  const download = () => 

    let content = document.getElementById('promote-content');

    if (content) 

      html2canvas(content,  useCORS: true, allowTaint: true ).then(res => 

        const imgBase64 = res.toDataURL('image/jpeg');

        let link = document.createElement('a');

        link.style.display = 'none';

        link.href = imgBase64;

        link.setAttribute('download', name + moment().format('YYYYMMDDHHmm'));

        document.body.appendChild(link)

        link.click();

        document.body.removeChild(link)

      )

    

  

如何处理浏览器的跨域问题

参考技术A 首先你需要阅读 CORS ，
首先你需要阅读 CORS ，
首先你需要阅读 CORS ，重要的事情说3遍

当浏览器发送一个跨域的xhr时，需要注意的是，首先会发送一个 Request Method: OPTIONS 类型的请求，如下图

当你使用了前端的vue，react,angular等框架时，可以直接使用他们的脚手架，脚手架提供一个配置好的 webpack ,可以在配置文件中的proxy添加代理地址，这样可以避免跨域问题，如果是自己搭建的框架自行配置 webpack 依然可以实现代理

后台的静态服务器（apache,nginx）一般都带有代理功能，可以自行配置，代理前端项目的xhr请求到真实的后台接口地址，这样可以避免跨域问题