jscanvas实现⼆维码和图⽚合成的海报
本⽂实例为⼤家分享了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, //宽度
svg和canvas的区别height: 72, //⾼度
text: res.data.poster_qrcode, //任意内容
});
三、把图⽚画到画布上，需要占满全屏
//画海报
var width = ElementById("canbox").offsetWidth; //宽度
var height = ElementById("canbox").offsetHeight; // ⾼度
var c = ElementById("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 = DataURL("image/png");
return image;
}
var mycans = $('canvas')[1];//⼆维码所在的canvas
var codeimg = convertCanvasToImage(mycans)
var xw = width - 72 - 29
var xh = height - 6 - 72
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 = DataURL("image/png");
DataURL("image/png"))
images.setAttribute("crossOrigin", 'Anonymous')
$('.canimg').attr('src', DataURL("image/png"))
}, 0)
}
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。