我要评论本文实例为大家分享了canvas二维码和图片合成海报的具体代码，供大家参考，具体内容如下
思路：在微信中登录，后台传来的是一个链接、一个名字、一张图片。把图片当做背景，画满整个画布。之后需要把链接转为二维码，使用jq.qrcode转化，转化完成后是一个canvas，把这个canvas再转成一张图片，画到大的画布上。把名字画到画布上。把整张画布转为图片。
一、定义画布和合成海报的img
<style type="text/css">
#canbox {
width: 100%;
height: 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
}
.canimg {
width: 100%;
height: 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
}
</style>
<div id="qrcode"> </div> <div id="canbox"> <canvas id="mycanvas" width="" height=""></canvas> </div> <img class="canimg" src=""/>
二、用jquery.qrcode把网址变成二维码
后台传过来的是网址，需要转为二维码，二维码也是canvas，需要把二维码转为图片
$("#qrcode").qrcode({
width: 72, //宽度
height: 72, //高度
text: res.data.poster_qrcode, //任意内容
});
三、把图片画到画布上，需要占满全屏
//画海报
var width = document.getelementbyid("canbox").offsetwidth; //宽度
var height = document.getelementbyid("canbox").offsetheight; // 高度
var c = document.getelementbyid("mycanvas");
c.width = width
c.height = height
var ctx = c.getcontext("2d");
//首先画上背景图
var img = new image();
img.src = this.list.poster;
img.setattribute("crossorigin", 'anonymous')
var x_bot = height - 44 //画上名字
ctx.font = "19px georgia";
//画上二维码
function convertcanvastoimage(canvas) {
var image = new image();
image.src = canvas.todataurl("image/png");
return image;
}
var mycans = $('canvas')[1];//二维码所在的canvas
var codeimg = convertcanvastoimage(mycans)
var xw = width - 72 - 29
var xh = height - 6 - 72
img.onload = function() { //必须等待图片加载完成
ctx.drawimage(img, 0, 0, width, height); //绘制图像进行拉伸
ctx.filltext(that.name, 28, x_bot);
ctx.drawimage(codeimg, xw, xh, 72, 72);
//绘制完成,转为图片
settimeout(function() { //在ios上无法在画完之后取到整个画布内容，加了个settimeout
var bigcan = $('canvas')[0];
let images = new image();
images.src = bigcan.todataurl("image/png");
alert(bigcan.todataurl("image/png"))
images.setattribute("crossorigin", 'anonymous')
$('.canimg').attr('src', bigcan.todataurl("image/png"))
}, 0)
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论