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 相关文章推荐
jquery实现在页面加载的时自动为日期插件添加当前日期
Aug 20 Javascript
浅谈Javascript 数组与字典
Jan 29 Javascript
jQuery判断对象是否存在的方法
Feb 05 Javascript
利用CSS3在Angular中实现动画
Jan 15 Javascript
利用jquery实现瀑布流3种案例
Sep 18 Javascript
微信小程序 icon组件详细及实例代码
Oct 25 Javascript
原生JS轮播图插件
Feb 09 Javascript
JavaScript实现滑动导航栏效果
Aug 30 Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
vue左侧菜单,树形图递归实现代码
Aug 24 Javascript
uni-app 支持多端第三方地图定位的方法
Jan 03 Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
详解@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
flash用php连接数据库的代码
2011/04/21 PHP
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
mysqli_set_charset和SET NAMES使用抉择及优劣分析
2013/01/13 PHP
使用PHP similar text计算两个字符串相似度
2015/11/06 PHP
php获取服务器操作系统相关信息的方法
2016/10/08 PHP
基于jquery扩展漂亮的下拉框可以二次修改
2013/11/19 Javascript
jQuery之Deferred对象详解
2014/09/04 Javascript
javascript常用函数(2)
2015/11/05 Javascript
javascript实现禁止复制网页内容汇总
2015/12/30 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
基于JavaScript实现回到页面顶部动画代码
2016/05/24 Javascript
Vue.js每天必学之数据双向绑定
2016/09/05 Javascript
jQuery实现发送验证码并60秒倒计时功能
2016/11/25 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
vue轮播图插件vue-concise-slider的使用
2018/03/13 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
微信小程序 scroll-view的使用案例代码详解
2020/06/11 Javascript
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
Python用Pillow(PIL)进行简单的图像操作方法
2017/07/07 Python
分享给Python新手们的几道简单练习题
2017/09/21 Python
Tensorflow的可视化工具Tensorboard的初步使用详解
2018/02/11 Python
Django REST framework 单元测试实例解析
2019/11/07 Python
python使用Thread的setDaemon启动后台线程教程
2020/04/25 Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
2020/06/23 Python
Python如何将字符串转换为日期
2020/07/31 Python
使用python tkinter开发一个爬取B站直播弹幕工具的实现代码
2021/02/07 Python
Python用SSH连接到网络设备
2021/02/18 Python
css3的transition属性详解
2014/12/15 HTML / CSS
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
团员学习总结的自我评价范文
2013/10/14 职场文书
农村党支部先进事迹
2014/01/14 职场文书
《小石潭记》教学反思
2014/02/13 职场文书
银行贷款承诺书
2014/03/29 职场文书
企业财务总监岗位职责
2015/04/03 职场文书
javascript的setTimeout()使用方法总结
2021/11/20 Javascript
Golang map映射的用法
2022/04/22 Golang