欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js canvas实现二维码和图片合成的海报

程序员文章站 2023-10-22 20:02:10
本文实例为大家分享了canvas二维码和图片合成海报的具体代码,供大家参考,具体内容如下 思路:在微信中登录,后台传来的是一个链接、一个名字、一张图片。把图片当做背景,画...

本文实例为大家分享了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)
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。