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


Posted in Javascript onNovember 19, 2020

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

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

Javascript 相关文章推荐
JavaScript 继承的实现
Jul 09 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
Jul 17 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
Nov 25 Javascript
使用Node.js处理前端代码文件的编码问题
Feb 16 Javascript
jQuery图片左右滚动代码 有左右按钮实例
Jun 20 Javascript
详解vue项目构建与实战
Jun 27 Javascript
使用JS动态显示文本
Sep 09 Javascript
在vue项目中,使用axios跨域处理
Mar 07 Javascript
打通前后端构建一个Vue+Express的开发环境
Jul 17 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 Javascript
关于layui 弹出层一闪而过就消失的解决方法
Sep 09 Javascript
详解@angular/cli 改变默认启动端口两种方式
Nov 29 #Javascript
js实现每日签到功能
Nov 29 #Javascript
Vue.js的复用组件开发流程完整记录
Nov 29 #Javascript
javascript实现考勤日历功能
Nov 29 #Javascript
vsCode安装使用教程和插件安装方法
Aug 24 #Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
Nov 29 #Javascript
简述vue路由打开一个新的窗口的方法
Nov 29 #Javascript
You might like
php中用foreach来操作数组的代码
2011/07/17 PHP
php生成静态页面的简单示例
2014/04/17 PHP
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
2010/02/26 Javascript
在VS2008中使用jQuery智能感应的方法
2010/12/30 Javascript
jQueryUI中的datepicker使用方法详解
2016/05/25 Javascript
AngularJS 模块化详解及实例代码
2016/09/14 Javascript
js拖拽功能实现代码解析
2016/11/28 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
2017/03/02 Javascript
JS实现移动端实时监听输入框变化的实例代码
2017/04/12 Javascript
vue中页面跳转拦截器的实现方法
2017/08/23 Javascript
ES6中Array.find()和findIndex()函数的用法详解
2017/09/16 Javascript
angular4自定义组件详解
2017/09/28 Javascript
javascript执行上下文、变量对象实例分析
2020/04/25 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
2020/06/28 Javascript
JS实现点击掉落特效
2021/01/29 Javascript
Python实现多线程下载文件的代码实例
2014/06/01 Python
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
Python 功能和特点(新手必学)
2015/12/30 Python
python+selenium开发环境搭建图文教程
2017/08/11 Python
深入理解Python中range和xrange的区别
2017/11/26 Python
Python元组知识点总结
2019/02/18 Python
python自动发邮件总结及实例说明【推荐】
2019/05/31 Python
Django 实现外键去除自动添加的后缀‘_id’
2019/11/15 Python
Python基于pandas绘制散点图矩阵代码实例
2020/06/04 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
全球领先的鞋类零售商:The Walking Company
2016/07/21 全球购物
体育教师工作总结的自我评价
2013/10/10 职场文书
高中自我鉴定范文
2013/11/03 职场文书
计算机网络专业求职信
2014/06/05 职场文书
银行柜员求职自荐书
2014/06/18 职场文书
个人事迹材料范文
2014/12/29 职场文书
离职感谢信怎么写
2015/01/22 职场文书
解放思想大讨论活动总结
2015/05/09 职场文书
pytorch中的model=model.to(device)使用说明
2021/05/24 Python
Java实现超大Excel文件解析(XSSF,SXSSF,easyExcel)
2022/07/15 Java/Android