问题：前端使用html2canvas解决图片跨域而显示不出来
背景：希望生成的html生成图片保存下来
解决方法：1.后端解决跨域问题 2.后端生成base64图片，前端展示 3.签到生成base64图片，展示（重点讲述该方法）
把写的html样式生成图片展示出
使用 tml2canvas 方法（该方法想了解的去百度）
base64方法（完整的代码）
function getBase64Image(img: any, width?: any, height?: any) {
var canvas = document.createElement("canvas");
canvas.width = width ? width : img.width;
canvas.height = height ? height : img.height; var ctx = canvas.getContext("2d");
ctx?.drawImage(img, 0, 0, canvas.width, canvas.height);
var dataURL: any = canvas.toDataURL();
return dataURL;
}
var image= new (Image as any)();
image.src = img;
image.setAttribute("crossOrigin",'Anonymous')
return new Promise((resolve, reject) => {
image.onload = function () {
resolve(getBase64Image(image));//将base64传给done上
}
});
};
调用
getBase64(url).then(data => { console.log(630, data); })
本地测试遇到的问题：
1、
Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported
翻译：大概意思是canvas无法执行toDataURL方法：污染的画布无法输出。
解决：图片设置跨域属性crossOrigin
img.setAttribute("crossOrigin",'Anonymous')
2、Cannot read properties of undefined (reading 'prefixCls')
翻译：大概意思是未提供 "props" 的自变量。 其目标缺少构造签名的 "new" 表达式隐式具有 "any" 类型。
原因是 var image= new Image();
解决：把 var image= new Image();改成var image= new (Image as any)();就行了
