canvas实现背景图和二维码合并-生成海报

话不多说，只是想分享踩坑的经验，若有不好，请谅解
//想看实际效果的话，可以关注公众号“捧场客”，商品详情里面分享，是海报合成，可以研究下

//若不嫌弃，可以直接拿过去复制，只需要改成自己的图片地址就行
//记住二维码需要动态计算宽高
//html代码

 <div id="qrcode"></div><div id="canbox"><canvas id="myCanvas" width="" height=""> <img src=""></canvas></div><img class="canimg" src="" />

//引入js

这个js很重要哦，百度都有
<script src="js/qrcode.min.js" type="text/javascript" charset="utf-8"></script>

//然后生成二维码

//这里的data是你要生成二维码的连接function getQrOrderFunc(data) {console.log('二链接:', data)new QRCode('qrcode', {text: data,width: 120,height: 120,correctLevel: QRCode.CorrectLevel.M}); // 设置要生成二维码的链接}

//接下来就开始画画

//画海报var width = document.getElementById("canbox").offsetWidth; //宽度 var height = document.getElementById("canbox").offsetHeight; // 高度var c = document.getElementById("myCanvas");c.width = widthc.height = heightvar ctx = c.getContext("2d");//首先画上背景图var img = new Image();img.setAttribute("crossOrigin", 'Anonymous')img.src = imgUrl; //获取图片地址var devicePixelRatio = window.devicePixelRatio || 1,backingStoreRatio = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio ||ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1,ratio = devicePixelRatio / backingStoreRatio;c.width = width * ratio;c.height = canvasheight * ratio;c.style.width = width + 'px';c.style.height = canvasheight + 'px';ctx.scale(ratio, ratio);//进行正常的操作// context.drawImage()//画上二维码function convertCanvasToImage(canvas) {var image = new Image();image.src = canvas.toDataURL("image/png");return image;}var mycans = $('canvas')[0]; //二维码所在的canvas// console.log('mycans:',mycans)var codeimg = convertCanvasToImage(mycans)// console.log('codeimg:',codeimg)// var xw =  250.0 / 375.0 * width// var xh = 456.0 / 570.0 * canvasheightvar xw = 250.0 / 375.0 * widthvar xh = 456.0 / 570.0 * canvasheight + 15let w = 90.0 / 375.0 * widthif (xw + w > width) {xw = width - w - 20}if (xh + w > canvasheight) {xh = canvasheight - w}img.onload = function() { //必须等待图片加载完成ctx.drawImage(img, 0, 0, width, canvasheight); //绘制图像进行拉伸ctx.drawImage(codeimg, xw, xh, w, w);// alert(2)setTimeout(function() { //在ios上无法在画完之后取到整个画布内容，加了个settimeoutlet images = new Image();images.setAttribute("crossOrigin", 'Anonymous')var bigcan = document.getElementById("myCanvas");var base64 = bigcan.toDataURL("image/png");// alert(5)$('.canimg').attr('src', base64)// completeLoading()// alert(6)loadingFunc.removeLoading()}, 0)}

canvas实现背景图和二维码合并-生成海报相关推荐

Python学习之生成带logo背景图的二维码（静态和动态图）
前言二维码简称 QR Code(Quick Response Code),学名为快速响应矩阵码,是二维条码的一种,由日本的 Denso Wave 公司于 1994 年发明.现随着智能手机的普及,已广 ...
vuejs中html2canvas使用背景图和二维码海报图片保存到一张图片上生成一张海报并下载
不少的项目中都用到了二维码加背景图片生成海报的宣传图片,实现方法就是canvas绘制到一张上后进行下载.html2canvas的技巧在这里不在讲解. 二维码和背景图片进行定位. 在传统场合,这类功能往 ...
jquery.qrcode生成带logo和背景图的二维码
效果图: <html lang="zh-cn"> <head> <title>jQuery生成二维码分享图片</title> < ...
thinkphp 使用phpqrcode生成带logo二维码并生成海报
1-下载类库 composer require aferrandini/phpqrcode -vvv 2-common的方法 //$text 文本的内容 //$logo logo图片 function ...
使用phpqrcode生成带logo二维码并生成海报
1-下载类库 composer require aferrandini/phpqrcode -vvv 2-common的方法 //$text 文本的内容 //$logo logo图片 function ...
在H5、微信小程序中使用canvas绘制二维码、分享海报
在H5.微信小程序中使用canvas绘制二维码.分享海报文章目录在H5.微信小程序中使用canvas绘制二维码.分享海报前言一.canvas绘制二维码 1.H5中使用canvas 2.微信小程 ...
如何使用12tool二维码合成器将多张二维码图片生成一张动态GIF图？
我们会有以下二维码合成单张GIF图的场景需求: 1.怎样把几张支付宝付款码合成一张动态的二维码图轮流切换然后扫描识别: 2.如何将几张微信名片二维码或者微信付款码.商家码合成一张动态的二维码图片: 3 ...
今日小程序推荐：香蕉打码-二维码随意生成
2019独角兽企业重金招聘Python工程师标准>>> 最近小编在处理公众号的事项时发现想要DIY二维码,本来想生成动态的,发现有点难度,就找到了小程序,其中有一款小程序可以生成静态 ...
js二维码样式生成插件easy.qrcode.js
下载地址easy.qrcode.js二维码生成插件是一款原生js二维码类库,可以生产成各式各样的二维码样式.支持JavaScript模块化加载.支持点状风格,Logo,背景图片,规则色彩控制,标题等设 ...
asp.net 后台生成二维码及生成带logo的二维码
asp.net 后台生成二维码及生成带logo的二维码,此处将生成二维码和带Logo的二维码写在一起的,需要自己区分一下. 直接上代码 using System; using System.Colle ...

canvas实现背景图和二维码合并-生成海报

canvas实现背景图和二维码合并-生成海报相关推荐

最新文章

热门文章