jQuery实现微信长按识别二维码功能

最近一直在搞一个微信开发的项目，终于快要完工了，今天小编抽个时间记录下在项目开发过程中遇到jquery.qrcode.min.js生成二维码长按不识别的解决方法，希望对大家有所帮助！

1.引入JS库

<script src="jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.qrcode.min.js" type="text/javascript" charset="utf-8"></script>

2.在页面创建一个空的div;

<div id="qrDiv"></div>

3.生成二维码

$("#qrDiv").qrcode({
width: 120, //宽度
height:120, //高度
text: "需要生成的二维码内容" //任意内容
});

注意：这个时候生成的二维码在微信中长安没任何反应，因为qrcode生成的是canvas标签而不是img标签

4.将canvas标签转换为img标签

//从 canvas 提取图片 image
function convertCanvasToImage(canvas) {
//新Image对象，可以理解为DOM
var image = new Image();
// canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持
// 指定格式 PNG
image.src = canvas.toDataURL("image/png");
return image;
}
//获取网页中的canvas对象
var mycanvas1=document.getElementsByTagName('canvas')[0];
//将转换后的img标签插入到html中
var img=convertCanvasToImage(mycanvas1);
$('#imagQrDiv').append(img);//imagQrDiv表示你要插入的容器id

注意：完成上述步骤后就可以在微信中长按识别了

以上所述是小编给大家介绍的jQuery实现微信长按识别二维码功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • jQuery+PHP实现微信转盘抽奖功能的方法

    本文实例讲述了jQuery+PHP实现微信转盘抽奖功能的方法.分享给大家供大家参考,具体如下: 本文结合实例将使用jQuery和PHP来实现转盘抽奖程序. 准备工作 首先要准备素材,抽奖的界面用到两张图片,圆盘图片和指针图片,实际应用中可以根据不同的需求制作不同的圆盘图片. 接着制作html页面,实例中我们在body中加入如下代码: <div class="demo"> <div id="disk"></div> <div

  • jquery1.8版本使用ajax实现微信调用出现的问题分析及解决办法

    先给大家说下问题背景:最近在做一个项目,开发微信的某个功能,使用的是asp.net开发,jquery1.8.0版本. 在微信中点击按钮触发事件,调用ajax与服务器端进行交互,回调函数走的是error. 分析原因:首先我想到的是返回的数据类型有问题,因为在jquery 版本在1.4以上对json的格式非常严格,需要符合{"target":true,"message":"成功"}这样的格式.用JSON.stringify()函数分析了respons

  • 使用jQuery.wechat构建微信WEB应用

    使用jQuery.wechat构建微信WEB应用

    因为最近自己的产品要在微信公众号中推广,需要提供一些有意义的功能,于是被迫走上了支持微信这条不归路. 众所周知,腾讯是那样一个神奇的公司,他们的产品在商业上获得巨大成功,但文档真的很难令人恭维,诺大一个公众号开发平台,我竟然找不到真正的,关于web开发的官方文档,有的就是个别示例,剩下的...呵呵,有一个叫开发者交流互助的东东. 看完上面这个图后,有没有这样的感觉,一帮群众拼命的想知道发生了什么,但就是没有官方声明!o(∩_∩)o 哈哈 说了这么多,赶紧入正题,本期要讲的就是我痛苦中挣扎徘徊后写

  • 使用jQuery Rotare实现微信大转盘抽奖功能

    使用jQuery Rotare实现微信大转盘抽奖功能

    很多公司到了年底都会做一些抽奖活动来刺激.吸引.粘住客户,比如抽奖转盘活动. 前几天用一个jqueryRotate插件实现了转盘的效果.比起那些很炫丽的flash是稍逊点,但也基本实现了需求 效果图: 实现这个其实蛮简单的,转动的效果用的jqueryRotate插件,所以只要判断每个奖荐对应的角度,然后设置指针的转动角度就可以了.比如关键的是jqueryRotate这个插件的用法. jqueryRotate的资料: 支持Internet Explorer 6.0+ .Firefox 2.0 .S

  • JavaScript结合Bootstrap仿微信后台多图文界面管理

    JavaScript结合Bootstrap仿微信后台多图文界面管理

    js模仿微信后台管理的多图文界面,集成了ajax异步上传文件的插件,供大家参考,具体内容如下 效果图: 详细代码: html: <div id="wrap"> <div id="sidebar"> <div class="previewBox"> <!-- <p style="margin:10px 14px 0 14px;"><span class="ms

  • jquery使用ajax实现微信自动回复插件

    myscript.js 复制代码 代码如下: var _autorun;var str = new Array('转发什么','分享什么','已转发','已轉發','己转发','继续申请','在不','已发送','以转发','以分享','已分享','yv','bv','gv','pv','rv','你好','美女','索要','代码','我要','要v','要加v');var isrun = false;var i=0;function start(){    console.log('第'+(

  • Jquery 类网页微信二维码图块滚动效果具体实现

    首先是自己定制的脚本方法属性代码: 复制代码 代码如下: /*  * 创建浮动图片广告(Generate a dock AD image)  *  * USAGE:   *  $(selector).higo_plugins_ad({  *      src:null,                    // 广告图片路径  *      closeSrc:null,               // 关闭图片路径  *      href:"#",                

  • jquery仿微信聊天界面

    jquery仿微信聊天界面

    首先看一下我们的效果图. 这个颜色可能搭配的有些不合适,但基本功能大都实现了.就是你和你同桌对话,你发的消息在你的左侧,而在他设备的右侧. 首先先写好整体的框架,在一个大容器中放两个盒子,分别是左侧和右侧的界面.然后每个盒子里面包含了三大部分:头部.内容区.和底部.只要写好一侧,另一侧进行粘贴复制就可以了. 首先定义一个大的 来盛放左右两个盒子. <div id = "main"> //左侧聊天界面 <div id = "box"> <

  • jQuery实现微信长按识别二维码功能

    最近一直在搞一个微信开发的项目,终于快要完工了,今天小编抽个时间记录下在项目开发过程中遇到jquery.qrcode.min.js生成二维码长按不识别的解决方法,希望对大家有所帮助! 1.引入JS库 <script src="jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script> <script src="jquery.qrcode

  • iOS模仿微信长按识别二维码的多种方式

    参考:https://github.com/nglszs/BCQRcode 方式一: #import <UIKit/UIKit.h> @interface ViewController : UIViewController @end ************** #import "ViewController.h" @interface ViewController () @end @implementation ViewController - (void)viewDid

  • Android WebView实现长按保存图片及长按识别二维码功能

    Android WebView实现长按保存图片及长按识别二维码功能

    先来简单说一下本文所要实现的功能:用户在浏览网页的时候,长按某一区域,识别如果是图片,则弹出弹框,出现保存图片的功能.同时识别图片是否是二维码,如果是则在弹框中追加识别二维码功能. 细节上:保存图片的弹框要显示在手指长按的位置:选择图片保存后,可以让用户直接去相册查看:选择识别二维码,判断是是不是网址,是的话可以让用户选择复制或访问,否则可以让用户选择复制或搜索. 然后再来看一下效果图: 保存图片 save.gif 识别包含普通文字的二维码: text.gif 识别包含网址的二维码: code.

  • 微信小程序webview实现长按点击识别二维码功能示例

    本文实例讲述了微信小程序webview实现长按点击识别二维码功能.分享给大家供大家参考,具体如下: 场景:微信小程序,使用webview控件.需求:点击图片后长按图片出现"识别二维码" 1.JS代码: <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> <script type="text/javascript"> $(fu

  • 微信小程序里长按识别二维码的实现过程

    微信小程序里长按识别二维码的实现过程

    前言 我们都知道公众号里的二维码可以长按识别,但是小程序限制比较严格,没有办法实现二维码的长按识别,一直以来我都是这样认为的,微信的官方规则里也是这么写的,直到今天上午,我无意间发现一个小程序里的二维码居然可以长按识别,于是就好奇的去研究了一番,结果还真的可以实现小程序里长按识别二维码.不知道是官方的漏洞还是程序的bug,但是既然这个功能可以实现,那当然要愉快的用上一用啦 老规矩,先看效果图 可以看到,我们成功的在小程序里实现了长按识别二维码的功能.下面就教大家如何一步步实现吧.因为官方的规格还

  • 微信小程序长按识别二维码的几种情况分析

    目录 一.image标签 + show-menu-by-longpress=“{{true}}” 二.wx.previewImage 三. web-view 支持长按识别的码 补充:扫码中有几个可配置的参数注意下 总结 小程序中的图片已支持长按识别了,总结一下几种情况下: 一.image标签 + show-menu-by-longpress=“{{true}}” <image src="{{qrcode}}" mode="widthFix" show-menu

  • PHP生成二维码与识别二维码的方法详解【附源码下载】

    PHP生成二维码与识别二维码的方法详解【附源码下载】

    本文实例讲述了PHP生成二维码与识别二维码的方法.分享给大家供大家参考,具体如下: 二维码的分类 线性堆叠式二维码 矩阵式二维码 二维码的优缺点 优点 信息容量大 编码范围广 容错能力强 译码可靠性高 可引入加密措施 成本低,易制作 缺点 二维码技术成为手机病毒.钓鱼网站传播的新渠道 信息泄密 目前流行的三大国际标准 PDF417:不支持中文 DM:专利未公开,需支付专利费用 QR CODE:专利公开,支持中文 QR CODE 纠错能力 L级:约可纠错7%的数据码字 M级:约可纠错15%的数据码

  • Android 二维码 生成和识别二维码 附源码下载

    Android 二维码 生成和识别二维码 附源码下载

    今天讲一下目前移动领域很常用的技术--二维码.现在大街小巷.各大网站都有二维码的踪迹,不管是IOS.Android.WP都有相关支持的软件.之前我就想了解二维码是如何工作,最近因为工作需要使用相关技术,所以做了初步了解.今天主要是讲解如何使用ZXing库,生成和识别二维码.这篇文章实用性为主,理论性不会讲解太多,有兴趣可以自己查看源码. 1.ZXing库介绍 这里简单介绍一下ZXing库.ZXing是一个开放源码的,用Java实现的多种格式的1D/2D条码图像处理库,它包含了联系到其他语言的端口

  • js中调用微信的扫描二维码功能的实现代码

    关键代码 <html> <head> <title> js调用微信扫一扫功能测试 </title> <!--引用微信JS库--> <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <!--引用jQuery库--> <script t

  • Java使用opencv识别二维码的完整步骤

    Java使用opencv识别二维码的完整步骤

    目录 前言 OpenCV的安装 开发环境配置 识别二维码 总结 前言 OpenCV的全称是Open Source Computer Vision Library,它是一个跨平台的计算机视觉库,由英特尔公司发起并参与开发,以BSD许可证授权发行,可以在商业和研究领域中免费使用.OpenCV本身由C++语言开发,但也具有各种其他语言的接口,并支持windows.linux.ios.android等各种操作系统.本文将介绍如何使用OpenCV与Java语言进行二维码识别. OpenCV的安装 目前Op

随机推荐