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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用html2Canvas生成图片跨域如何处理?相关的知识,希望对你有一定的参考价值。

参考技术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请求到真实的后台接口地址,这样可以避免跨域问题

以上是关于使用html2Canvas生成图片跨域如何处理?的主要内容,如果未能解决你的问题,请参考以下文章

一篇文章搞明白CORS跨域

一篇文章搞明白CORS跨域

java使用代理 html2canvas 截屏 将页面内容生成图片

求助,哪位大神知道html2canva 有跨域图片,怎么解决

解决-使用html2canvas截取页面时,页面的div背景图无法截取并跨域

canvas2html 遇到的跨域问题