点击复制以及长按识别图中二维码功能

功能介绍：1.点击复制按钮，复制指定内容；2.借助微信浏览器识别图中二维码。效果如图：

功能介绍

点击复制功能

前提：引入clipboard.js

html

<div class="guide-div" data-clipboard-target=".guide-content-token" data-clipboard-action="copy"><div class="guide-content-token">kj1111</div><div class="guide-copy">点击复制</div>
</div>

$('.guide-copy').text('点击复制');$('.guide-content-token').text(token);
$('.guide-content-qrcode img').attr('src', qrcode);var clipboard = new Clipboard('.guide-div').on('success', function(e){$('.guide-copy').text('复制成功');
}).on('error', function(e){alert('复制失败')
});

特别注意：如果是IOS，必须对可点击的元素增加样式cursor: pointer;否则无效，也就是.guide-copy这个样式的元素必须要加cursor: pointer

识别图中二维码

这个功能简单，直接把二维码放在img标签就可以了。一般无法出现“识别图中二维码”的功能的原因是：二维码被当成背景，也就是放到background属性中。

这里要说的是一个小技巧，例如：左边是二维码，右边是指纹，提示用户长按指纹区域可以识别二维码。然后指纹区域附近又有文字，长按可能会出现复制而不是识别图中二维码。解决方案就是：通过img增加padding-right, 增大可接触面积，可以实现该功能

点击复制以及长按识别图中二维码功能相关推荐

小程序：长按识别图中二维码
在小程序项目中,有时候我们需要按住二维码,弹出: 识别图中二维码的功能 1. API 小程序文档 - API - 媒体 - 图片 - perviewImage( ) : 在新页面中全屏预览图片.预览 ...
小程序中图片点击预览、长按识别图中二维码的问题
通过自己的测试以及各类博客资料的查询,总结如下: 1.小程序中的图片不能识别除小程序码以外的二维码 2.并且仅在 wx.previewImage 中支持长按识别官方文档(wx.previewImag ...
Android 长按识别图中二维码
基于 Zing, 初学android 代码质量可能不高 bigImage.setOnLongClickListener(new View.OnLongClickListener() {@Overri ...
Vue实现长按图片识别图中二维码
Vue实现长按图片识别图中二维码思路:要想实现可以识别图片中的二维码,那必定是要将这张图进行上传操作,上传则需要file对象格式.不管是在H5还是APP中,展示的图片都是通过url的方式展示在img ...
cocoscreator实现微信内置浏览器点击图片识别图中二维码
最近在做一个微信内置浏览器的小游戏,小游戏中有一个二维码,需要用户点击长按二维码弹出系统识别二维码按钮. 下面是解决步骤: 1.cocoscreator是如何实现在浏览器中渲染游戏画面的看图中箭头处 ...
仿商城商品生成分享海报图片和识别图中二维码并跳转商品详情页
购物商城里面的商品分享给朋友的时候会生成一张海报图片,图片上附带这二维码图片,朋友拿到这张图片扫描上面的二维码就可以进入商品详情页查看此商品了.今天来做一下这种功能,先生成商品海报图片,然后长按这张图 ...
Zxing识别图中二维码实践
参考网上文章,做如下实践. implementation('com.journeyapps:zxing-android-embedded:3.6.0') { transitive = false } ...
微信小程序长按图片，实现保存、转发、识别图中二维码
在小程序image组件中二维码/小程序码图片不支持长按识别,仅在 wx.previewImage 中支持长按识别但是通过wx.previewImage只能实现保存,转发,小程序只能识别小程序二维 ...
讨论一下微信小程序中如何长按识别图片中二维码跳转
[一].image标签展示二维码目前微信官方支持小程序原生页面在微信版本IOS≥8.0.6,安卓≥8.0.3时直接长按识别二维码, <image src="二维码图片地址" ...

点击复制以及长按识别图中二维码功能

功能介绍

点击复制功能

识别图中二维码

点击复制以及长按识别图中二维码功能相关推荐

最新文章

热门文章