微信内置浏览器动态生成二维码并长按识别

最新推荐文章于 2023-03-16 15:42:52 发布
原创 最新推荐文章于 2023-03-16 15:42:52 发布 · 2.5k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #javascript #小程序 #html5 #es6

本文介绍如何在微信内置浏览器中利用qrcode.js动态生成可长按识别的二维码，并解决html2canvas生成图片的跨域及保存问题。

现如今围绕微信生态相关开发已经非常常见，本期带来如何通过 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对象重新转换
    • 生成的图片弹窗展示，避免出现其他元素影响微信识别率
最低0.47元/天 解锁文章
HTML5 的 `＜img＞` 元素是否为块级元素？
SVIPCODE的博客
09-29 656
元素实际上不是块级元素，而是内联元素。块级元素通常用于创建页面中的块或容器，而内联元素用于包含文本或其他内联内容。元素默认为内联元素，但可以通过 CSS 将其显示为块级元素。元素的行为有点特殊，因为它既可以作为内联元素使用，也可以通过 CSS 样式设置为块级元素。元素是内联元素，它会按照文本流的方式在页面中显示，并且不会独占一行。元素显示为块级元素，你可以使用 CSS 来改变其显示行为。元素独占一行，并且在宽度上自动填充其父容器。元素是内联元素还是块级元素，都可以使用。的类，并将其设置为块级元素。
js生成二维码：支持微信、浏览器扫码
m0_55546349的博客
04-20 1085
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Q-WMS管理系统</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> </hea.
微信开发系列（六）_js调用微信扫码
XuTen的博客
01-21 1万+
项目里面需要用到用户通过网址来进行授权 需要用到微信的扫码（请用微信打开 看效果  http://lg.kezir.com/testSaoMa/jsDemo.html?a=1 ） 微信JS-SDK说明文档 概述 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。 通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选
img是行元素还是块元素
weixin_43465508的博客
03-16 4244
img属于行内可替换元素，height、width、padding、margin均可用，效果 html5的img不是块级元素。img、input、textarea、select、object 都是替换元素。这些元素往往没有实际的内容，即是一个空元素。可替换元素的性质同设置了display:inline-block的元素一致。又因为img是可替换元素，具有独立的宽高，宽高就是图片本身的宽高。浏览器根据元素的标签和属性，来决定元素的具体显示内容，src:源属性,源属性的值是图像的 URL 地址。
img标签和p标签是行内元素还是块级元素？以及p标签中可以放img标签吗？
吴冬雪的博客
05-21 2万+
其他块级元素：常用的有：　div、p、ul、ol、li、dl、dt、dd、fieldset、form、h1~h6、hr、table另外还有：address、isindex、menu、noframes、noscript、pre、blockquote、center、dir、块级元素，默认宽度占满一行。HTML 是段落标签，除了可以添加文字内容外，完全可以添加其他。类似于 inline-block ，可以被p标签包裹。比如p是居中，图片也中了。也包括IMG图片标签。
微信小程序webview实现长按点击识别二维码功能示例
10-17
9. **微信JS-SDK的使用限制**: 需要注意的是，微信JS-SDK的调用必须在微信环境中，这意味着你的网页需要在微信内置浏览器或者微信小程序的webview中运行。 10. **注意安全**: 使用微信JS-SDK时，一定要确保所有敏感...
uniapp写的移动端网页项目，使用canvas生成了一个二维码，想要在微信浏览器打开的时候长按识别二维码，应该怎么调起微信的二维码识别弹窗
最新发布
06-18
由于微信内置浏览器无法直接长按识别 Canvas 上的二维码，因此需要将 Canvas 转换为图片格式（如 Base64 或 Blob）。以下是转换代码： ```javascript convertCanvasToImage(canvas) { return new Promise((resolve,...
vue3中App怎么长按识别二维码并进入扫描二维码界面
03-26
比如在微信内置浏览器中，长按图片会自动识别二维码，这时候可能需要阻止默认行为，或者利用微信的JS SDK来增强功能。 代码结构方面，在Vue3的组件中，可能需要使用ref来保存定时器，并在onMounted和...
vue3中App使用image标签怎么长按识别二维码并进入扫描二维码界面
03-26
但在移动端，特别是微信内置浏览器中，长按图片可能会自动识别二维码。但如果用户开发的是App，可能需要借助第三方库或原生能力。 可能的实现步骤包括： 1. 在Vue3中给image标签添加长按事件监听。 2. 当长按事件...
行内元素和块状元素的区别以及特列--img是行内元素，但是可以设置宽高。
Handsome2013的博客
05-10 920
我们习惯将html中元素分类为行内元素和块级元素，如下： ·常见块级元素有：html、body、div、header、footer、nav、section、aside、article、p、hr、h1~h6、ul、ol、dl、form、table、tbody、thead、tfoot、tr等； ·常见行内元素有：span、a、img、textarea、button、input、br、label、select、canvas、progress、cite、code、strong、em、audio、video等
微信内置浏览器 长按识别二维码 的问题与解决方案
肖肖肖丽珠的博客
06-16 1万+
首先要注意：在微信里面只有img写的图片才可能识别二维码。而你写的background-image是识别不出来的。 1，在iOS 微信6.2.2识别的二维码的区域向上偏移了64px 这64px是微信内置浏览器标题栏+系统标题栏 二维码大到一定程度就没有“识别上移”的诡异现象了，大概是二维码大小在400px 以上的时候就没有。 解决： 1.通过img增加pa
html替换和不可替换元素
linda_417的博客
07-20 1273
从元素本身的特点来讲，可以分为替换和不可替换元素。 1、替换元素 替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。 例如浏览器会根据img标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；又例如根据input标签的type属性来决定是显示输入框，还是单选按钮等。 (X)HTML中的img、input、textarea、se
img是行内元素，为什么也可以设置框高？
BigDaddy233333的博客
11-17 1513
尽管img是行内元素，但同时它也是置换元素，置换元素一般内置框高属性，因此可以设置其框高。 那么什么又是“置换元素”呢？ 置换元素就是会根据标签属性来显示的元素。反之就是非置换元素了。 比如img根据src属性来显示，input根据value属性来显示，因此可知道img和input是置换元素，当然同理textarea, select,也是置换元素  ...
块级元素和块元素，行内级元素和行内元素 ，置换元素与非置换元素 （img是行内元素，但是可以设置高度，因为他本身具有一定的高度和宽度，是置换元素，所以可以设置高度和宽度）
claudia_dawn的博客
09-02 720
1. 什么是块级元素？ 块级元素是那些视觉上会被格式化成块状的元素，通俗一点来说就是那些会换新行的元素。display 属性的：block, list-item, table, flex, grid 值都可以将一个元素设置成块级元素。 举个例子来说，li 是一个 块级元素，但也有人会说它是一个 块元素。嗯，li 确实是一个块级元素，但并不是一个块元素，为什么？ 2.
微信内置浏览器 长按识别二维码 功能的两三个坑与解决方案
热门推荐
iplaycoder的博客
08-13 3万+
这篇文章是上一篇的延伸与总结，做的一个微信游戏宣传页上要调用长按识别二维码的功能，做的过程中遇到了两个坑，后来在组里分享会上分享了入坑经历，然后再度发现一个坑。本文就是在分享会上发言总结而成。 坑一：iOS 版微信长按识别二维码无法正常识别的bug 以下实测在iOS 版（iPhone）微信2.2 中有此bug，安卓版微信暂时没有发现有此bug。“众所周知”，在一些使用在微信内置浏览器的页面
img、input到底是行内还是块级元素？
weixin_30835933的博客
10-06 2376
一、img、input属于行内替换元素。height/width/padding/margin均可用。效果等于块元素。 行内非替换元素，例如, height/width/padding top、bottom/margin top、bottom均无效果。只能用padding left、right和marginleft、right改变宽度。 二、在文档类型定义（DTD）中对不同的元...
img标签到底是行内元素还是块级元素
Cangjie627的博客
01-15 829
面试官问你<img>是什么元素时你怎么回答写这篇文章源自我之前的一次面试，题目便是问img标签属于块级元素还是行内元素，当时想都没想就说了是行内(inline)元素，面试官追问为什么能够设置 <img /> 标签的宽和高，当时脑子突然一懵，发现这是自己技术上的一个空白，所以有了这篇文章。阅读本文您将收获<img />标签的基本使用MDN关于元素的定义特殊的可替换...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值