github这个项目,几行代码生成海报及二维码
前言
现如今围绕微信生态相关开发已经非常常见,本期带来如何通过 qrcode.js 实现微信内置浏览器动态生成二维码并能够长按识别 以及 通过 html2canvas 生成图片并长按保存
说几个知识点
微信长按弹出识别选项的原理
微信客户端检测到用户长按img标签
微信主动进行截屏并识别图片,二维码识别采用的是截屏而不是通过img标签
微信识别成功后执行相关操作
Base64
Base64是网络上最常见的用于传输8Bit字节码的编码方式之一,Base64就是一种基于64个可打印字符来表示二进制数据的方法
Blob
HTML5中的Blob对象与MySQL中的BLOB对象有区别,HTML5中的Blob对象除了存放二进制数据外还可以设置这个数据的MINE类型,这相当于对文件的存储,其它很多二进制对象也是从这个对象继承的
canvas.toDataURL([type, encoderOptions])
type : 指定图片类型,默认值 image/png
encoderOptions : 为 image/jpeg 或 image/webp 类型的图片设置图片质量,取值0-1,超出则以默认值0.92替代
作用: 通过canvas进行转化图片
准备工作
结合微信规范明确需求
微信img标签通过src属性可实现长按弹出选项(保存至手机,图片为二维码的情况下会出现识别二维码)
二维码图片若为本地图片或服务器图片(即不需要进行动态生成)只需要正常编写代码即可实现
微信针对内置浏览器内的页面图片有着自己的一套适应逻辑与规范,canvas的图片和base64编码格式的图片在安卓与ios手机上会出现不同的问题
确定实现方案
本例采用第三方js库实现生成二维码
针对生成的base64编码的图片微信无法长按识别需要在前端进行格式和image对象重新转换
生成的图片弹窗展示,避免出现其他元素影响微信识别率
开发环境
开发平台
MacOS
开发环境
Vue + node
客户端环境
Google Chrome
Wechat Webview
技术实现
本例的技术实现方案均在Vue项目环境下实现的
引入第三方js库
提供两种引入方式,两种方式是不同的js库,方便大家选择和使用
// qrcode.js官方GitHub文档: https://github.com/davidshimjs/qrcodejs
<script src="static/js/qrcode.js"></script>
复制代码
npm install qrcodejs2
import qrCode from 'qrcodejs2'
复制代码
npm 引入 qrcodejs2
本地引入 qrcode.js
组件中调用
HTML
<div class="qrcode-panel" id="qrcode"></div>
JS
new QRCode(document.getElementById('qrcode'), 'your content');
// new QRCode(element, option)
// element 显示二维码的元素或该元素的 ID
// option 参数配置
复制代码
var qrcode = new QRCode(document.getElementById("qrcode"), {text: "https://www.xxx.com?did=123456&id=123&userid=456",width: 160, //图像宽度height: 160, // 图像高度render: 'canvas', // 生成格式(table 和 canvas)colorDark : "#000000", //前景色colorLight : "#ffffff", //背景色correctLevel : QRCode.CorrectLevel.H // 容错级别
});
// 容错级别,可设置为:
QRCode.CorrectLevel.L(最大 7% 的错误能够被纠正)
QRCode.CorrectLevel.M(最大 15% 的错误能够被纠正)
QRCode.CorrectLevel.Q(最大 25% 的错误能够被纠正)
QRCode.CorrectLevel.H(最大 30% 的错误能够被纠正)
复制代码
QRCode.makeCode(text) // 设置二维码内容
QRCode.clear() // 清除二维码
复制代码
QRCode.makeCode(text) // 设置二维码内容
QRCode.clear() // 清除二维码
其他公共方法
标准调用
简单调用
重置 Image 对象
重置的原因是原JS生成的 image 和 canvas 对象无法在微信端长按识别
var canvas = document.getElementsByTagName('canvas')[0];
var img = this.convertCanvasToImage(canvas);
document.getElementById("qrcode").append(img);convertCanvasToImage(canvas) {//新建Image对象var image = new Image();// canvas.toDataURL 返回的是一串Base64编码的URLimage.src = canvas.toDataURL("image/png");image.id = 'qrcodeImg';return image;}
后续细节处理
至此,一个能够满足长按识别的动态二维码已经生成,不继续处理的话会有两张二维码,长按对比就能看出,qrcode.js 生成的二维码长按无法识别,而经过重置之后的对象是可以实现此功能的。
我的处理方式是两个二维码都保留,将二维码图片进行重新定位,将重置的二维码图片置于不能识别二维码上层,不去频繁操作DOM节点的显示隐藏。
生成的二维码通过 append 的方式插入到dom节点中,在关闭操作时需要将之前生成的 canvas 和 image 去除
微信内置浏览器生成canvas图片保存
上述教程可以实现动态生成二维码进行保存和长按识别,但是如果需要将HTML内容生成canvas保存就存在问题了。
针对保存需要注意的几个问题:
canvas禁止跨域
安卓微信长按不能保存base64图片
微信限制Blob类型图片的保存
使用 canvas.toDataURL 绘制时的类型使用 image/jpeg 进行保存
技术选型
使用第三方JS库 html2canvas 进行处理
识别和生成原理:
脚本直接在用户浏览器上截取网页或部分网页的”屏幕截图”
“屏幕截图”基于DOM,因此它可能不是真实表示的100%准确,因为它没有制作实际的屏幕截图,而是根据页面上可用的信息构建屏幕截图
存在的问题:
正是因为 html2canvas 不是基于真正的屏幕截图去识别处理,所以脱离了文档流,或者文档流异常的元素会无法被截取下来
html2canvas 只会截取到目标元素宽高范围内的内容
对部分css样式支持不好,兼容性差的属性列表
一些可能需要的参数
useCORS : 是否尝试使用CORS从服务器加载图像
async : 是否异步解析和呈现元素
scale : 用于渲染的比例。默认为浏览器设备像素比率window.devicePixelRatio
allowTaint : 是否允许画布被污染,被污染的canvas是没法使用toDataURL()转base64流的,部分细节请 参考这里
更多 html2canvas 参数请点击这里
引入第三方JS库
使用 html2canvas
import html2canvas from 'html2canvas'
组件中调用
HTML
<div class="html2canvas-conetent" ref="canvasContent"><img src="/static/images/canvas.jpg"><span>测试Title</span>
</div>
<button @click="showCanvas()">生成canvas图片</button>
JS
使用 html2canvas 推荐的promise方法
showCanvas() {let self = this;html2canvas(self.$refs.canvasContent).then(function(canvas) {self.imgUrl = canvas.toDataURL();self.showCanvasImg = true;});
}
// 异步解析调用和呈现元素
showCanvas() {let self = this;html2canvas(self.$refs.canvasContent {async: true}).then(canvas => {self.imgUrl = canvas.toDataURL();self.showCanvasImg = true;});
}
实现效果
源码地址
附赠Github源码地址:
https://github.com/programmer-zhang/com.frontend.www/blob/master/src/views/wechat.vue
回复 【idea激活】即可获得idea的激活方式
回复 【Java】获取java相关的视频教程和资料
回复 【SpringCloud】获取SpringCloud相关多的学习资料
回复 【python】获取全套0基础Python知识手册
回复 【2020】获取2020java相关面试题教程
回复 【加群】即可加入终端研发部相关的技术交流群
用 Spring 的 BeanUtils 前,建议你先了解这几个坑!
lazy-mock ,一个生成后端模拟数据的懒人工具
在华为鸿蒙 OS 上尝鲜,我的第一个“hello world”,起飞!
字节跳动一面:i++ 是线程安全的吗?
一条 SQL 引发的事故,同事直接被开除!!
太扎心!排查阿里云 ECS 的 CPU 居然达100%
一款vue编写的功能强大的swagger-ui,有点秀(附开源地址)
相信自己,没有做不到的,只有想不到的
在这里获得的不仅仅是技术!
喜欢就给个“在看”
github这个项目,几行代码生成海报及二维码相关推荐
- 【移动端】vue宣传海报拼接二维码
来源需求 项目宣传海报,海报上有项目入口二维码,由于该海报的二维码是实时生成,因此不能用固定的二维码,所以才需要调用后端接口获取到对应的链接,然后转成二维码,最后拼接到海报图上,再进行展示. 功能实现 ...
- 使用 iview 实现PC端生成推广海报与二维码并下载的功能,基于iview Modal 对话框 与 Carousel 走马灯组件实现
使用 iview 实现PC端生成推广海报与二维码并下载的功能,基于iview Modal 对话框 与 Carousel 走马灯组件实现 前言:最近在对公司网页进行改版的时候遇到一个问题,需要在PC端实 ...
- Android 图片合成海报生成二维码,指定文字。
一 ,图片合成,海报增加二维码,文字,或者用户ID.先看图 这个是没有合成之前的图. 合成之后的图. . 使用到的技术点 1,图片Glide 2, banner2.0 3, zxing class M ...
- 【Uni-App】点击分享,生成海报带二维码,保存到本地图片,写入文字
目录 一:需求 二:分析 三:准备工作 1.qrcode准备 2.并且在main.js去挂载 四:页面构建 1.html 2.data 3.js 二维码嵌入文字 一:需求 1.产品需要这个商品,必须分 ...
- java生成二维码 推广海报添加二维码 文字水印 二维码添加LOGO
前言 场景: 一.推广海报贴上二维码,用户扫码跳转 二.二维码中间贴logo eg:这里使用展示第一种场景 一.使用工具 Google开源项目ZXing(二维条码编解码). ...
- div生成图片_Vue生成分享海报(含二维码)
本文已同步到专业技术网站 www.sufaith.com, 该网站专注于前后端开发技术与经验分享, 包含Web开发.Nodejs.Python.Linux.IT资讯等板块. 功能需求: 海报有1张背景 ...
- Java生成海报带二维码,原图或base64返回
Maven引入包; <dependency><groupId>com.google.zxing</groupId><artifactId>core< ...
- 【Android QR Code】开源项目:ZXing(三)二维码解码
继续上一节的内容 本节我们将对上一节的QQ群号二维码进行解码 QQ群号二维码图片另存为后,将下载的.jpg拷贝到项目assets目录下 1.解码配置 Map<DecodeHintType,Obj ...
- 开源项目:ZXing(三)二维码解码
继续上一节的内容 本节我们将对上一节的QQ群号二维码进行解码 QQ群号二维码图片另存为后,将下载的.jpg拷贝到项目assets目录下 1.解码配置 Map<DecodeHintType,Obj ...
最新文章
- cgi标准面试php,PHP面试:简述CGI、FastCGI和PHP
- 从PC、数据中心再到边缘计算,Zen架构的终点在哪?
- LESSON 9.1 随机森林回归器的实现
- openresty开发系列4--nginx的配置文件说明
- Python 的 heapq 模块源码分析
- Kinect+OpenNI+OpenCV使用
- 图像特征提取与描述_角点特征04:LBP算法+HOG特征算子
- hystrix 页面_微服务 | 使用Hystrix实现Spring Cloud的熔断机制
- java中thread实例_Java多线程并发执行demo代码实例
- 【计算机组成原理】第1章 计算机系统概论
- DOS 下编写带有日期的脚本例子
- 力扣(LeetCode)46
- 【计算机网络】网络通信基础
- 免费商用字体查询方法
- 《捷哥浅谈Drupal》第三弹之Drupal 7基本功能概述
- 简单正则^(?![^a-zA-Z]+$)(?!\D+$)[0-9a-zA-Z]{6,35}$
- 松山湖云计算机中心,【东莞唯一】中科院云计算中心被点赞,松山湖又又又亮了!...
- js点击使内容变成可编辑状态
- 通过快递100获取快递单号,结合c-lodop热敏纸打印 – 通过菜鸟ISV/自研ERP使用菜鸟电子面单...
- loadrunner 操作mysql_loadrunner学习笔记(从MYSQL中取数据)
热门文章
- python 读取传入参数
- 学渣的刷题之旅 leetcode刷题 20.有效的括号
- 联想服务器能够上固态硬盘吗,联想Y400能不能装固态硬盘 需要什么接口的
- [网络安全学习篇1]:windowsxp、windows2003、windows7、windows2008系统部署(千峰网络安全视频笔记)
- 深入理解Activity的生命周期
- 工业器械视觉检测方案
- 大数据开发薪资水平怎么样?
- AlphaStar: Mastering the Real-Time Strategy Game StarCraft II 博客阅读
- 悲观的人更容易获得好的感觉
- Android 图像混合技术