这次给大家带来js与canvas合成图片做出微信公众号海报功能，js与canvas合成图片做出微信公众号海报功能的注意事项有哪些，下面就是实战案例，一起来看一下。
在微信公众号开发中,很多时候都有个需求是一张图加上头像和昵称或者其他数据生成自己的二维码海报或者是生成分享海报
这个需求,php的gd库是可以实现的,但是用服务器进行图片合成,会消耗服务器大量的资源
所以我们可以考虑用以下方式实现
一:js的canvas图片合成方法
$(function () { draw(function () {//生成之后的回调 $('#img')[0].innerHTML='
';//将base生成图片 }); }); var data=[https://www.php.cn/faq/图片1地址,https://www.php.cn/faq/图片2地址,https://www.php.cn/faq/图片3地址]; base64=[];//用于保存生成之后的base64 function draw(fn) { var img1= new Image; img1.src = data[0]; img1.onload = function () {//这步必须,因为图片加载是异步的,必须等图片加载完成才开始下面的这些步骤 var c = document.createElement('canvas'), ctx = c.getContext('2d'); c.width = img1.naturalWidth; c.height = img1.naturalHeight; ctx.rect(0, 0, c.width, c.height); ctx.fillStyle = '#fff'; ctx.fill(); //生成一张https://www.php.cn/faq/图片1的底图 /*下面是为底图增加上文字*/ ctx.drawImage(img1, 0, 0, c.width, c.height);(绘制图片资源,x坐标,y坐标,宽,高) //设置字体样式 ctx.font = "24px Courier New"; //设置字体填充颜色 ctx.fillStyle = "write"; //从坐标点(92,800)开始绘制文字 ctx.fillText("这是文字内容", 92, 800); /*上面是增加文字,可以无限加*/ var img2= new Image; img2.src = data[1]; img2.onload = function () {//同理,如果是加载图片的话,需要等图片加载出来再下一步,所以要加onload ctx.drawImage(img2, 245, 660, 150, 150);(绘制图片资源,x坐标,y坐标,宽,高) base64.push(c.toDataURL("image/jpeg", 1));//如果绘制完成了,就把base64数据填进数组,然后回调,没完成则继续这步 fn();//回调 }; }; } ///如果是坐标相同,或者觉得代码这样不美观的,可以使用递归方法实现onload的步骤,例如: function draw(fn) { a(0); fn(); } function a(i){ if (i == 0) { var img1= new Image; img1.src = data[0]; img1.onload = function () { var c = document.createElement('canvas'), ctx = c.getContext('2d'); c.width = img1.naturalWidth; c.height = img1.naturalHeight; ctx.rect(0, 0, c.width, c.height); ctx.fillStyle = '#fff'; ctx.fill(); //生成一张https://www.php.cn/faq/图片1的底图 /*下面是为底图增加上文字*/ ctx.drawImage(img1, 0, 0, c.width, c.height);(绘制图片资源,x坐标,y坐标,宽,高) //设置字体样式 ctx.font = "24px Courier New"; //设置字体填充颜色 ctx.fillStyle = "write"; //从坐标点(92,800)开始绘制文字 ctx.fillText("这是文字内容", 92, 800); /*上面是增加文字,可以无限加*/ a(1);//到第2个步骤 } } else if (i == 1) { var img2= new Image; img2.src = data[1]; img2.onload = function () {//同理,如果是加载图片的话,需要等图片加载出来再下一步,所以要加onload ctx.drawImage(img2, 245, 660, 150, 150);(绘制图片资源,x坐标,y坐标,宽,高) base64.push(c.toDataURL("image/jpeg", 1));//如果绘制完成了,就把base64数据填进数组,然后回调,没完成则a(2)到第三步; return; }; } }
登录后复制
二:使用html2canvas进行网页保存成图片//需引入html2canvas.js
//使用css进行网页布局
登录后复制
$(window).load(function(){ var shareContent = $(".qrbg")[0]; var width = shareContent.offsetWidth; var height = shareContent.offsetHeight; $(".qrcodepic").height(height); var canvas = document.createElement("canvas"); var scale = 2; canvas.width = width * scale; canvas.height = height * scale; canvas.getContext("2d").scale(scale, scale); var rect = shareContent.getBoundingClientRect(); canvas.getContext("2d").translate(-rect.left,-rect.top); var opts = { scale: scale, canvas: canvas, width: width, height: height, useCORS:true }; html2canvas($(".qrcodepic"), opts).then(function (canvas) { dataURL =canvas.toDataURL("image/png"); $(".qrcodemain").html("![js与canvas合成图片做出微信公众号海报功能](https://www.php.cn/faq/"+dataURL+")
"); });});
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
用JQ怎么实现右键点击收藏网页
jQuery必须掌握的API
怎样实现文件上传带进度条动画
jQuery实现多层验证后的表单验证
以上就是js与canvas合成图片做出微信公众号海报功能的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2782232.html
