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和JQuery实用代码片段(一)
Apr 07 Javascript
jQuery 源码分析笔记(3) Deferred机制
Jun 19 Javascript
JavaScript 代码压缩工具小结
Feb 27 Javascript
jQuery随机切换图片的小例子
Apr 18 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
Feb 26 Javascript
jquery列表拖动排列(由项目提取相当好用)
Jun 17 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
Jun 14 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
Apr 18 Javascript
微信小程序实现多宫格抽奖活动
Apr 15 Javascript
利用原生的JavaScript实现简单拼图游戏
Nov 18 Javascript
JS实现的小火箭发射动画效果示例
Dec 08 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
Apr 11 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
特详细的PHPMYADMIN简明安装教程
2008/08/01 PHP
php简单实现多字节字符串翻转的方法
2015/03/31 PHP
PHP生成各种随机验证码的方法总结【附demo源码】
2017/06/05 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
JavaScript中valueOf函数与toString方法深入理解
2012/12/02 Javascript
JavaScript中instanceof运算符的用法总结
2013/11/19 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
2014/08/15 Javascript
简介JavaScript中的sub()方法的使用
2015/06/08 Javascript
Jquery技巧(必须掌握)
2016/03/16 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
2016/09/16 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
Vue异步组件使用详解
2017/04/08 Javascript
详解原生js实现offset方法
2017/06/15 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
2017/06/19 Javascript
详解jquery选择器的原理
2017/08/01 jQuery
微信小程序 转发功能的实现
2017/08/04 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
2019/03/19 Javascript
python实现得到当前登录用户信息的方法
2019/06/21 Python
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
Python换行与不换行的输出实例
2020/02/19 Python
Django 自定义404 500等错误页面的实现
2020/03/08 Python
python实现横向拼接图片
2020/03/23 Python
Django URL参数Template反向解析
2020/11/24 Python
利用 CSS3 实现的无缝轮播功能代码
2017/09/25 HTML / CSS
您的网上新华书店:文轩网
2016/08/24 全球购物
丝芙兰法国官网:SEPHORA法国
2016/09/01 全球购物
数控技术专业毕业自荐书范文
2014/02/05 职场文书
ElementUI实现el-form表单重置功能按钮
2021/07/21 Javascript
关于redisson缓存序列化几枚大坑说明
2021/08/04 Redis
你真的会用Mysql的explain吗
2022/03/31 MySQL
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL
ubuntu下常用apt命令介绍
2022/06/05 Servers