html2canvas 绘制图片, 如果页面中存在 img, 出现绘制的结果无图片时, 原因如下:(建议逐步查找)
1. 绘制时间过早, 图片尚未加载
解决方式: 通过 setTimeout 延迟绘制或者通过 img.onload 监听图片是否绘制完成
2. 绘制的图片跨域问题
解决方式: 图片生成前, 添加 image.crossOrigin = "*";
切记: 要在图片赋值之前添加
3. 如果出现安卓或者 pc 端正常显示, iOS 端无法显示的问题
解决方式: 处理图片跨域时, 防止的位置不正确, 正确方式如下
- var image = new Image();
- image.crossOrigin = "*"; // 必须在 image 之前赋值
- image.src = src + '?v=' + Math.random(); // 处理缓存
4. 页面的部分 img, 绘制后在 iOS 上无显示 (亲测多为 jpeg 图片)
解决方式: 将图片转化为 base64 格式即可.
- function getBase64Image(img) {
- var canvas = document.createElement("canvas");
- canvas.width = img.width;
- canvas.height = img.height;
- var ctx = canvas.getContext("2d");
- ctx.drawImage(img, 0, 0, img.width, img.height);
- var dataURL = canvas.toDataURL("image/png"); // 可选其他值 image/jpeg
- return dataURL;
- }
- function init(src, type) {
- var image = new Image();
- image.crossOrigin = "*"; // 必须在 image 之前赋值
- image.src = src + '?v=' + Math.random(); // 处理缓存
- image.onload = function(){
- var base64 = getBase64Image(image);
- if (type == 1){ // 区分是第几个图片
- $('#img1').attr('src',base64);
- } else if (type==2) {
- $('#img2').attr('src',base64);
- // 开始绘制
- setTimeout(function () {
- App.draw()
- },1000)
- }
- return base64
- }
- }
5. 字符串过长使用 CSS 隐藏, 有特殊字符不显示, 如:
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
使用上述 CSS, 隐藏字符串会出现绘制的图片只有占位不显示的问题
现解决方案对字符进行裁剪 (5 位为最佳)
- function cutStr(str,L){
- var result = '',
- strlen = str.length, // 字符串长度
- chrlen = str.replace(/[^\x00-\xff]/g,'**').length; // 字节长度
- if(chrlen<=L){return str;}
- for(var i=0,j=0;i<strlen;i++){
- var chr = str.charAt(i);
- if(/[\x00-\xff]/.test(chr)){
- j++; // ascii 码为 0-255, 一个字符就是一个字节的长度
- }else{
- j+=2; // ascii 码为 0-255 以外, 一个字符就是两个字节的长度
- }
- if(j<=L){ // 当加上当前字符以后, 如果总字节长度小于等于 L, 则将当前字符真实的 + 在 result 后
- result += chr;
- }else{ // 反之则说明 result 已经是不拆分字符的情况下最接近 L 的值了, 直接返回
- return result;
- }
- }
- }
6. 文字重叠
1. 设置文字居中, 文字自动换行后文字有重叠 text-align: center;
解决办法: text-align: left; text-align: justify; 等
2. 使用了 "/" 分开语句."/" 可能与后面的字重叠
解决办法: 使用全角来编写 "/" 试试
来源: https://blog.csdn.net/L95_0719/article/details/101311806