篇首语：本文由小编为大家整理，主要介绍了使用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生成图片跨域如何处理？的主要内容，如果未能解决你的问题，请参考以下文章
