canvas生成图片,canvas生成图片被截断
使用html2Canvas生成图片跨域如何处理？
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)
??????})
????}
??}
canvas生成图片字符串太长
设置的问题。canvas生成图片字符串太长多数是设置的问题导致的。只需要打开canvas，设置字符即可。vanvas是html5中新增的一个元素，可以完成绘制图像、制作动画的功能。
支付宝&微信小程序Canvas生成图片
canvas转换图片api不相同，并且参数不相同，支付宝参数与支付宝开发者文档中的参数都出现不相同
下面我们看微信的wx.canvasToTempFilePath和支付宝ctx.toTempFilePath中success返回的参数差异,我们如果要获取对应的图片，wx返回两种图片格式，一种是本地图片，一种是http协议内部临时图片（tempFilePath）。而支付宝只存在一种图片格式，http协议临时图片（apFilePath）。
微信端中如果需要绘画canvas生成的图片进已有的canvas，采用drawImage，其中第一个参数是图片地址，微信端中要采用tempFilePath参数，支付宝端需要采用apFilePath
微信小程序canvas生成图片为空白问题
项目中用canvas生成图片时都为空白，原因为 wx.canvasToTempFilePath必须写在wx.draw()的回调中才能实现。
官方wx.canvasToTempFilePath说明：
微信小程序 canvas生成图片是空白的
参考文章： 微信小程序 canvas 绘图问题总结
公司提了图片压缩的需求，在网上查了些资料，用canvas实现了，但发现使用wx.canvasToTempFilePath如果只是打印图片地址然后点击地址查看图片，或者保存图片至相册再查看图片，拿到的图片就是正常的，但我如果要在压缩后的success回调中使用图片去做一些事情（比如编码wx.getFileSystemManager().readFile、上传至服务器wx.request），拿到的图片就是空白的。
经过多次调试后发现，是这里的问题
这里需要设置的多一点。我之前设置的100，即100ms，可能因为上传至服务器是异步的，导致100ms内canvas没法完成图片加载操作，生成的图片就是空白的。改成1000之后，图片有足够长的时间渲染，就不会出现空白图片的问题了。