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 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
工作需要写的一个js拖拽组件
Jul 28 Javascript
js验证整数加保留小数点的简单实例
Dec 02 Javascript
javascript结合ajax读取txt文件内容
Dec 05 Javascript
jquery中toggle函数交替使用问题
Jun 22 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
Aug 21 Javascript
全面解析Bootstrap中nav、collapse的使用方法
May 22 Javascript
jquery动态创建div与input的实例代码
Oct 12 Javascript
jQuery中Chosen三级联动功能实例代码
Mar 07 Javascript
Vue.js 表单控件操作小结
Mar 29 Javascript
JavaScript设计模式之构造函数模式实例教程
Jul 02 Javascript
JavaScript实现图片放大预览效果
Nov 02 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中jQuery插件autocomplate的简单使用笔记
2012/06/14 PHP
在Laravel框架里实现发送邮件实例(邮箱验证)
2016/05/20 PHP
phpStudy配置多站点多域名和多端口的方法
2017/09/01 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
laravel批量生成假数据的方法
2019/10/09 PHP
javascript 定义初始化数组函数
2009/09/07 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
nodejs开发环境配置与使用
2014/11/17 NodeJs
JS实现超简单的仿QQ折叠菜单效果
2015/09/21 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
javascript 产生随机数的几种方法总结
2017/09/26 Javascript
NodeJS简单实现WebSocket功能示例
2018/02/10 NodeJs
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
微信小程序wepy框架学习和使用心得详解
2019/05/24 Javascript
vue-router路由模式详解(小结)
2019/08/26 Javascript
Python中的super()方法使用简介
2015/08/14 Python
简单谈谈Python中的几种常见的数据类型
2017/02/10 Python
浅谈用Python实现一个大数据搜索引擎
2017/11/28 Python
利用anaconda作为python的依赖库管理方法
2019/08/13 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
Python Tkinter实例——模拟掷骰子
2020/10/24 Python
Python截图并保存的具体实例
2021/01/14 Python
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
Hunkemöller西班牙:欧洲最大的内衣连锁店
2018/08/15 全球购物
CheapTickets泰国:廉价航班,查看促销价格并预订机票
2019/12/28 全球购物
物流司机岗位职责
2013/12/28 职场文书
分厂厂长岗位职责
2013/12/29 职场文书
致跳高运动员广播稿
2014/01/13 职场文书
2019同学聚会主持词
2019/05/06 职场文书
php随机生成验证码,php随机生成数字,php随机生成数字加字母!
2021/04/01 PHP
JavaScript继承的三种方法实例
2021/05/12 Javascript
详解Vue的options
2021/05/15 Vue.js
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python
Python  lambda匿名函数和三元运算符
2022/04/19 Python
Python docx库删除复制paragraph及行高设置图片插入示例
2022/07/23 Python