首页 / HTML / 如何将html转化为图片
如何将html转化为图片
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了如何将html转化为图片,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含4522字,纯文字阅读大概需要7分钟。
内容图文
在我们做h5页面或者推广小程序的时候,特别是在微信里,为了让用户更好的分享给朋友,往往需要将动态生成的html生成一个图片,然后让用户长按保存发给朋友或者朋友圈。1,在html里新建canvas画布
/**要生成图片的html*/<p class="con_1"> <p class="con_1_5"> <span class="title_des2">思路惊奇</span> <span class="title_des3">思路惊奇</span> </p> <img class="con_1_1" src="style/ActiveCDN/bonus/page7_1.png" alt=""> <img class="con_1_2" src="style/ActiveCDN/bonus/page7_1.png" alt=""> </p>/*生成的canvas和最终生成的图片*/<p class="shareImg"> <canvas id="canvas" width="750" height="1206"></canvas> <img src="" alt=""> </p>
//设置canva画布大小,这里会把画布大小设置为2倍,为了解决生成图片不清晰的问题,需要注意接下来所有的函数都是在html2canvas这个对象里定义的 var html2canvas={ canvas:document.getElementById("canvas"), ctx:canvas.getContext("2d"), saveImage:function(){ this.canvas.width=windowPro.innerWidth*2; this.canvas.height=windowPro.innerHeight*2-4.8*bastFontSize; this.ctx.fillStyle="#0c3e78"; this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height); } }
2,将要生成的图片的dom元素载入canvas中
a, 获取要加载到canvas的图片
domArray:[$(".con_1_1"),$(".con_1_2")],//要加载的图片元素列表 imgArrayLoad:function(){ var that=this,domArray=this.domArray; for(var i=0,len=domArray.length;i<len;i++){ (function(){ //循环出所有图片元素,一个个图片添加 that.addImgToCanvas(domArray[i],that.imgAllLoad); }()) } },
b,获取每个图片元素的在页面上大小,距离顶部地步距离,然后绘制到canvas相应的位置
addImgToCanvas:function(obj,fn){ var width=obj.width()*2,//图片在网页宽度
height=obj.height()*2,//图片在网页高度
x=obj[0].x*2,//图片距离网页最顶部距离
y=obj[0].y*2,//图片距离网页最右边距离
img=new Image(),
that=this,
src=obj.attr("src");
img.src=src;
img.onload=function(){ //把图片绘制到canvas上
that.ctx.drawImage(obj[0],x,y,width,height);上
that.loadImgNum++; if(fn && typeof fn === "function")fn(that.loadImgNum); /**位置1**/
}
},
3,将要生成的文字的dom元素载入canvas中
a, 获取要加载文字元素
textObj:[$(".title_des2"),$(".title_des3")], textArratLoad:function(){ var that=this; for(var m=0,len=that.textObj.length;m<len;m++){ (function(){ that.writeTextOnCanvas(domArray[m],parseInt(28)+"px 微软雅黑","#d0b150") })() } },
b,获取每个文字元素距离网页距离,同样的,距离距离长度必须喂2倍,把文字添加到canvas上
writeTextOnCanvas:function(obj,fontsize,color){//添加文字到canvas var width=obj.width()*2, height=obj.height()*2, x=obj.offset().left*2, y=obj.offset().top*2; var that=this; var text=obj.html().replace(/^\s+|\s+$/, "");//去掉文字里的空格 that.ctx.fillStyle =color; //设置文字颜色 that.ctx.font = fontsize;//设置文字大小 that.ctx.textAlign="left";//设置文字对其方向 textBaseline = "middle"; //因为canvas里的文字不会换行,所以我们需要想办法让长段文字换行 for(var i = 1; that.getTrueLength(text) > 0; i++){ var tl = that.cutString(text, 30); that.ctx.fillText(text.substr(0, tl), x, y+36*i);// 把文字添加到canvas上 text = text.substr(tl); } },
c,文字绘制到canvas时,自动换行。。因为canvas绘制文字的时候只能设置最大宽度和距离顶部左边距离。所以我们需要自行处理下。
getTrueLength:function(str){//获取字符串的真实长度(字节长度) var len = str.length, truelen = 0; for(var x = 0; x < len; x++){ if(str.charCodeAt(x) > 128){ truelen += 2; }else{ truelen += 1; } } return truelen; }, cutString:function(str, leng){//按字节长度截取字符串,返回substr截取位置 var len = str.length, tlen = len, nlen = 0; for(var x = 0; x < len; x++){ if(str.charCodeAt(x) > 128){ if(nlen + 2 < leng){ nlen += 2; }else{ tlen = x; break; } }else{ if(nlen + 1 < leng){ nlen += 1; }else{ tlen = x; break; } } } return tlen; }
4,最后把canvas转为图片,需要注意的是必须等所有图片都载入完成才能进行图片的生成,要不然会造成生成的图片不全。文字载入可以不考虑。
imgAllLoad:function(nexi){ var length=this.domArray.length; if(nexi>=length){ var dataURL = canvas.toDataURL(); $(".shareImg img").attr("src",dataURL);//canvas转为图片 } }
总结:
1.获取图片和文字位置,通过canvas的ctx.drawImage(IMG,left,top,width,height)绘制图片,通过.ctx.fillText(text, left,top)绘制文字,通过canvas.toDataURL();生成图片。
2.需要注意为了生成图片不失真,canvas大小是2倍,图片文字都是2倍。
3.为了文字换行, getTrueLength 。
4.必须等到图片都绘制完成,再生成图片,这个很重要。
相关推荐:
html5 - html图片点击事件找不到
javascript - html图片热区如自适应 map标签
关于html图片的问题?
以上就是如何将html转化为图片的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的如何将html转化为图片全部内容,希望文章能够帮你解决如何将html转化为图片所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。