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 (四) jQuery中操作元素的属性与样式
Feb 23 Javascript
查看图片(前进后退)功能实现js代码
Apr 24 Javascript
通过javascript把图片转化为字符画
Oct 24 Javascript
JavaScript异步加载浅析
Dec 28 Javascript
jQuery源码解读之addClass()方法分析
Feb 20 Javascript
javascript多行字符串的简单实现方式
May 04 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
Dec 01 Javascript
js 判断数据类型的几种方法
Jan 13 Javascript
Angular 2.x学习教程之结构指令详解
May 25 Javascript
详解用vue.js和laravel实现微信支付
Jun 23 Javascript
ionic 3.0+ 项目搭建运行环境的教程
Aug 09 Javascript
Node配合WebSocket做多文件下载以及进度回传
Nov 07 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实现12306余票查询、价格查询示例
2014/04/17 PHP
求帮忙修改个php curl模拟post请求内容后并下载文件的解决思路
2015/09/20 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
搭建自己的PHP MVC框架详解
2017/08/16 PHP
php 中htmlentities导致中文无法查询问题
2018/09/10 PHP
jquery实现文字由下到上循环滚动的实例代码
2013/08/09 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
JavaScript实现打字效果的方法
2015/07/10 Javascript
jquery实现具有收缩功能的垂直导航菜单
2016/02/16 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
2016/05/03 Javascript
JavaScript语言精粹经典实例(整理篇)
2016/06/07 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
2016/09/17 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
2017/03/11 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
2017/05/20 jQuery
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
Python实现测试磁盘性能的方法
2015/03/12 Python
python连接数据库的方法
2017/10/19 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
python让函数不返回结果的方法
2020/06/22 Python
python中if嵌套命令实例讲解
2021/02/25 Python
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
阳光体育:Sunny Sports(购买露营和远足设备)
2018/08/07 全球购物
高级运动鞋:GREATS
2019/07/19 全球购物
办公室文书岗位职责
2013/12/16 职场文书
股指期货心得体会
2014/09/13 职场文书
劳模事迹材料范文
2014/12/24 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
2015小学语文教师个人工作总结
2015/05/20 职场文书
大学生见习总结报告
2015/06/24 职场文书
节约用水广告语60条
2019/11/14 职场文书
Python按顺序遍历并读取文件夹中文件
2022/04/29 Python
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python