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

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.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

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

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » 简单记录 html2canvas网页中的图片无法显示的问题
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

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

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏