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语句中的CDATA标签的意义
May 09 Javascript
jQuery 工具函数学习资料
Apr 29 Javascript
基于jQuery的仿flash的广告轮播
Nov 05 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
Nov 04 Javascript
jQuery 1.8 Release版本发布了
Aug 14 Javascript
JavaScript中的原型继承基础学习教程
May 06 Javascript
jQuery+ajax简单实现文件上传的方法
Jun 03 Javascript
15个非常实用的JavaScript代码片段
Dec 18 Javascript
iphone刘海屏页面适配方法
May 07 Javascript
vue指令v-html使用过滤器filters功能实例
Oct 25 Javascript
vue 解决数组赋值无法渲染在页面的问题
Oct 28 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
Jul 27 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
一个数据采集类
2007/02/14 PHP
探讨如何把session存入数据库
2013/06/07 PHP
ThinkPHP中使用ajax接收json数据的方法
2014/12/18 PHP
Javascript客户端将指定区域导出到Word、Excel的代码
2008/10/22 Javascript
将string解析为json的几种方式小结
2010/11/11 Javascript
juqery 学习之三 选择器 层级 基本
2010/11/25 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
2011/01/17 Javascript
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
bootstrap data与jquery .data
2014/07/07 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
2015/07/26 Javascript
JS实现仿苹果底部任务栏菜单效果代码
2015/08/28 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
mui上拉加载功能实例详解
2017/04/13 Javascript
Vue通过input筛选数据
2020/10/26 Javascript
详解用node.js实现简单的反向代理
2017/06/26 Javascript
JS实现图片放大镜插件详解
2017/11/06 Javascript
微信小程序实现弹出菜单
2018/07/19 Javascript
详解使用uni-app开发微信小程序之登录模块
2019/05/09 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
JavaScript布尔运算符原理使用解析
2020/05/06 Javascript
[02:09]抵达西雅图!中国军团加油!
2014/07/07 DOTA
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
Python生成密码库功能示例
2017/05/23 Python
Python科学计算包numpy用法实例详解
2018/02/08 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
pycharm永久激活超详细教程
2020/10/29 Python
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
如何在Oracle中查看各个表、表空间占用空间的大小
2015/10/31 面试题
银行门卫岗位职责
2013/12/29 职场文书
幼教简历自我评价
2014/01/28 职场文书
中学生家长评语大全
2014/04/16 职场文书
竞选演讲稿范文大全
2014/05/12 职场文书
建议书格式
2015/02/04 职场文书
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS