canvas海报制作,canvas海报制作网页

　　啦啦，首先说一下需求。该产品希望用户在我们的app中分享一张图片到微信、qq等平台。图片包含用户的姓名、头像、二维码以及他们自己的信息。那么，如何生成这张海报呢~ ~ ~

　　首先我们老板告诉我有一个插件叫html2canvas，它的功能是把dom节点转换成图片，这是个好东西。我试了一下，确实有效，但是~这个插件有点大。推出这么大的东西来满足海报的这种需求，感觉很亏！所以，我还是自己画一张吧~

　　先上效果图。

　　当当~ ~ ~最后的海报包括头像，名字，二维码。当然图片上的二维码是百度的二维码~最后生成base64分享给各平台。

　　事不宜迟，加载代码(这段代码没有整理出来，因为懒。)

　　canvas id= my canvas width= 750 height= 1200 style= border:1px solid # d3d 3d 3；背景：# ffffff/canvasdom节点很简单，生成一个canvas标签，随意写一些属性就可以了~

　　var canvas=document . getelementbyid( my canvas )；//Get canvas节点函数ImageTocanvas (canvas，url1，url2，code){//传入canvas节点背景图像url1头像url2二维码var CTX=canvas . Get context( 2d )；var img 1=new Image()；img 1 . src=URL 1；//前一个不解释了。生成图像img 1 . onload=function(){ CTX . draw image(img 1，0，0)；//图片加载后，从0 0开始赋给画布。var img 2=new Image()；img 2 . src=URL 2；img 2 . onload=function(){ CTX . save()；//保存当前画布状态ctx.arc(374，134，44，0，2 * Math。PI)；//把方头剪成圆形。//从画布上剪下这个圆CTX . clip()；//砍掉CTX。DrawImage (IMG2，330，90，88，88)；//在330 90坐标放入大小为88 ctx.restore()的img2//释放画布状态ctx.font= 28px Arialctx.textAlign= centerctx.fillStyle= # FFFFFF//前面是设置文本属性到中心ctx.fillText(你叫什么名字，375，220)；//这里的文字写死了。实际操作中，如果多传几个参数，就ok var img 3=new Image()；img 3 . src=code；img 3 . onload=function(){ CTX . draw image(img 3，136，554，478，478)；//用同样的方法添加image varimgcode=convert canvas image(canvas)；//将图片变成base 64 console . log(img code . get attribute( src )} } } ImageTocanvas(canvas， 1.png ， 3.jpeg ， code . png )；//初始化函数convertcanvas image(canvas){ var image=new image()；image . src=canvas . toda taurl( image/png )；//canvas转换成img返回图像；}这样你就可以得到一个base64然后就可以用了。

　　这就是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。