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 相关文章推荐
js实现可折叠展开的手风琴菜单效果
Sep 07 Javascript
Windows系统下安装Node.js的步骤图文详解
Nov 15 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
Dec 09 Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
yarn的使用与升级Node.js的方法详解
Jun 04 Javascript
Vue.js实现实例搜索应用功能详细代码
Aug 24 Javascript
Vue+SpringBoot开发V部落博客管理平台
Dec 27 Javascript
基于vue2.x的电商图片放大镜插件的使用
Jan 22 Javascript
vue 自定义指令自动获取文本框焦点的方法
Aug 25 Javascript
cnpm加速Angular项目创建的方法
Sep 07 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 Javascript
vue2和vue3的v-if与v-for优先级对比学习
Oct 10 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入门速成教程
2007/03/19 PHP
使用XDebug调试及单元测试覆盖率分析
2011/01/27 PHP
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
php使用递归函数实现数字累加的方法
2015/03/16 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
jquery 插件学习(一)
2012/08/06 Javascript
比较新旧两个数组值得增加和删除的JS代码
2013/10/30 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
jQuery插件pagination实现分页特效
2015/04/12 Javascript
理解Javascript的动态语言特性
2015/06/17 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
Javascript之面向对象--方法
2016/12/02 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
2017/02/20 Javascript
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
[js高手之路]原型式继承与寄生式继承详解
2017/08/28 Javascript
基于jquery实现五星好评
2017/11/18 jQuery
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
python对离散变量的one-hot编码方法
2018/07/11 Python
python中多个装饰器的执行顺序详解
2018/10/08 Python
python处理RSTP视频流过程解析
2020/01/11 Python
基于tensorflow for循环 while循环案例
2020/06/30 Python
python+opencv实现车道线检测
2021/02/19 Python
纯CSS3打造属于自己的“小黄人”
2016/03/14 HTML / CSS
预防艾滋病宣传标语
2014/06/25 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
初中毕业典礼演讲稿
2014/09/09 职场文书
普宁寺导游词
2015/02/04 职场文书
鼋头渚导游词
2015/02/05 职场文书
导游词之杭州西湖
2019/09/19 职场文书
Python实现的扫码工具居然这么好用!
2021/06/07 Python
Python进行区间取值案例讲解
2021/08/02 Python
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js
vue如何使用模拟的json数据查看效果
2022/03/31 Vue.js