这次给大家带来的是用js和canvas合成图片制作微信公众号海报的功能。 用js和canvas合成图片制作微信公众号海报的功能有哪些注意事项? 这里有一个实际案例,我们来看一下。
在微信公众号开发中html5图片合成,经常需要添加图片、头像、昵称或者其他数据来生成自己的二维码海报或者生成分享海报。
这个需求可以通过PHP的gd库来实现,但是使用服务器进行图像合成会消耗大量的服务器资源。
所以我们可以考虑使用以下方法来实现
1:js canvas图像合成方法
$(function () { draw(function () {//生成之后的回调 $('#img')[0].innerHTML='';//将base生成图片 }); }); var data=[图片1地址,图片2地址,图片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(); //生成一张图片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(); //生成一张图片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; }; } }
登录后复制
2:使用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(""); }); });
登录后复制
相信看完本文的案例,您已经掌握了方法。 更多精彩资讯html5图片合成,请关注PHP中文网其他相关文章!