区块链技术博客
www.b2bchain.cn

简单记录 html2canvas网页中的图片无法显示的问题的讲解

这篇文章主要介绍了简单记录 html2canvas网页中的图片无法显示的问题的讲解,通过具体代码讲解7114并且分析了简单记录 html2canvas网页中的图片无法显示的问题的讲解的详细步骤与相关技巧,需要的朋友可以参考下

本文实例讲述了简单记录 html2canvas网页中的图片无法显示的问题的讲解。分享给大家供大家参考文章查询地址https://www.b2bchain.cn/7114.html。具体如下:

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://www.b2bchain.cn/7114.html

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » 简单记录 html2canvas网页中的图片无法显示的问题的讲解
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们