搜索
简帛阁>技术文章>js canvas实现二维码和图片合成的海报

js 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)
}
本文实例为大家分享了canvas二维码图片合成海报具体代码,供大家参考,具体内容如下思路:在微信中登录,后台传来是一个链接、一个名字、一张图片。把图片当做背景,画满整个画布。之后需要把链接转为二
项目中经常会遇到需要将不同二维码放到一张通用图片上,提供用户下载简单来说,就是利用canvas将同等比例二维码图片上叠加,生成海报1设置相应比例一般来说海报背景都是固定,可以直接放在publ
思路:在微信中登录,后台传来是一个链接、一个名字、一张图片。把图片当做背景,画满整个画布。之后需要把链接转为二维码,使用jqqrcode转化,转化完成后是一个canvas,把这个canvas再转成一
效果图代码<!DOCTYPEhtml><htmllangen><head><metacharsetUTF8><title>Title<
data(){return{logoimg:'',//logo图片ctx:'',qrBase64:'',//二维码地址}}//点击下载按钮访问downloadposterPicture(){varca
不多说,只是想分享踩坑经验,若有不好,请谅解//想看实际效果的话,可以关注公众号“捧场客”,商品详情里面分享,是海报合成,可以研究下//若不嫌弃,可以直接拿过去复制,只需要改成自己图片地址就行/
景:1用户点击分享朋友圈,将二维码与一张背景图合成一张图片,然后将其显示。2用户点击保存图片图片保存到手机相册里面。问题:用户点击分享盆友圈合成图片显示空白。控制台可以打印出来链接。实现合成
本文具体要实现效果类似下面这张图片,主题流程大概是,页面上有类似这样布局结构,点击中间那个紫色按钮就会生成一张这样图片,并且能够让用户下载图片1、首先我们布局页面时候用都是图片来布局成这
前言最近接到一个需求,用文字图片合成一个海报,用于活动结尾页在微信长按分享,接到需求第一时间,我就想到用canvas来画,但是看到canvas繁琐绘制过程,不由得感到头大,后几经搜索,果然发现已
本文实例讲述了微信小程序实现canvas合成图片功能。分享给大家供大家参考,具体如下:先要获取图片信息然后将需要合成内容用canvas绘制出来,得到一个合成画布,接下来用wxcanvasT