啦啦啦。首先，让我们谈谈要求。该产品希望用户在我们的应用程序中将图片分享到微信、QQ等平台。图片包含用户的姓名、头像，以及带有自己信息的二维码。那么，这个海报怎么生成呢~~~首先，我们老板告诉我，有个插件叫html2canvas，可以把dom节点转成图片，是个好东西。试了一下，确实可以，但是~这个插件有点大，为了满足发帖者的需求引入这么大的东西感觉不好！！！所以，还是自己画一张吧~首先，先上传效果图~~~最终生成的海报包括头像、名字和二维码。当然，图片上的二维码是百度的二维码~最后生成base64，用于各大平台Share。废话不多说，我们上代码（这段代码没有整理，因为我懒。。。）dom节点很简单，生成一个canvas标签，随便写一些属性就可以了~varcanvas=document.getElementById("myCanvas");//获取画布节点functionimageToCanvas(canvas,url1,url2,code){//输入画布节点背景图片url1头像url2二维码codevarctx=canvas.getContext("2d");varimg1=新图片();img1.src=url1;//前面的就不解释了现在生成图片img1.onload=function(){ctx.drawImage(img1,0,0);//当图片加载完成后，将其赋值给从00开始的画布。varimg2=新图片();img2.src=url2;img2.onload=function(){ctx.save();//保存当前画布状态ctx.arc(374,134,44,0,2*Math.PI);//裁剪操作将正方形头像裁剪成圆形//从画布上裁剪出圆形ctx.clip();//裁剪出来ctx.drawImage(img2,330,90,88,88);//将尺寸为88的img2放在坐标33090ctx.restore();//释放画布状态ctx.font="28pxArial";ctx.textAlign="居中";ctx.fillStyle='#FFFFFF';//前面是设置text属性居中ctx.fillText("你的名字是马的名字",375,220);//这里的文字是硬编码的。实际上，传递更多的参数是可以的。varimg3=新图片();img3.src=代码；img3.onload=function(){ctx.drawImage(img3,136,554,478,478);//同样的方法添加图片varimgCode=convertCanvasToImage(canvas);//图片转base64console.log(imgCode.getAttribute('src'))}}}}imageToCanvas(canvas,"1.png",'3.jpeg','code.png');//初始化函数convertCanvasToImage(canvas){varimage=newImage();image.src=canvas.toDataURL("图像/png");//canvas转为imgreturnimage;}这样就可以得到一个base64然后使用
