vue 二维码长按保存和复制内容操作

效果图：

二维码用了 qrcode.vue

npm install qrcode.vue --save 　

复制内容用了 vue-clipboard2

npm install vue-clipboard2 --save 　　

1.二维码保存功能：

<div class="qrcode">
    <qrcode-vue
      :size="qrcodeSize"
      :value="shareUrl"
      id="picture"
    ></qrcode-vue>
  </div>
  <div class="btn">
    长按保存至相册
    <img :src="qrcodeImgSrc" class="qrcode-img"/>
  </div>

注意，qrcode.vue渲染的是一个canvas,canvas可以通过toDataURL方法转换为png图片。

长按保存功能是在长按上加一张图片，设置这张图片的opacity为0即可。

模拟a标签点击下载的方法在微信上有问题。

let myCanvas = document.getElementById('picture').getElementsByTagName('canvas')[0];

this.qrcodeImgSrc = myCanvas.toDataURL('image/png'); 　　

2.点击按钮，复制粘贴功能：

<div class="copy">
          <span>{{shareUrl}}</span>
          <span @click="doCopy">复制</span>
 </div>
doCopy() {
      this.$copyText(this.shareUrl).then(function (e) {
        alert('Copied')
        console.log(e)
      }, function (e) {
        alert('Can not copy')
        console.log(e)
      })
    }
　　

补充知识：vue插件qrcode实现手机端二维码保存功能

1.安装

npm install qrcode --save

2.页面引入并使用

利用<img src="">标签，实现二维码图片功能。然后长按保存即可。

<template>
  <div class="qrcode">
    <canvas id="canvas" style="display:none"></canvas>
    <img :src="imgUrl"/>
    <p>长按保存二维码图片</p>
  </div>
</template>
import QRCode from 'qrcode'
export default {
  data() {
    return {
      codes: '',
      imgUrl:''
    }
  },
  components: {
    QRCode: QRCode
  },
  methods: {
    useqrcode() {//生成二维码
      let canvas = document.getElementById('canvas')
      let url="http://www.baidu.com"
      QRCode.toCanvas(canvas, url, function(error) {
        if (error) { console.error(error) } else { console.log('success!'); }
      })
      this.saveImg()//保存图片
    },
    //保存图片
    saveImg(){
      let myCanvas = document.getElementsByTagName('canvas');
      this.imgUrl=myCanvas[0].toDataURL('image/png')
    },
  },
  mounted() {
    this.useqrcode(); //生成二维码
  }
}
</script>

以上这篇vue 二维码长按保存和复制内容操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue中实现动态生成二维码的方法

    最近项目中有个裂变分享的需求,需要在页面中根据分享人的身份动态生成二维码图片放置在页面中,所以研究了一下这个功能的实现,同时把实现过程记录如下: 1.引入二维码生成模块 npm install qrcodejs2 --save 注意:此处安装qrcodejs2,安装依赖后可在main方法中进行全局引用设置,也可单独某个页面中进行引用设置. 2.引入使用 import QRCode from 'qrcodejs2'; 备注:在main中设置全局可使用 Vue.prototype.qrCode 3.

  • Vue实现手机扫描二维码预览页面效果

    本文实例为大家分享了Vue实现手机扫描二维码预览页面的具体代码,供大家参考,具体内容如下 背景:vue-cli3 + ant-design-vue 搭建的后台管理系统 需求:实现扫描二维码即可在手机预览H5页面功能 使用插件:qrcode step1:安装插件 npm install qrcode --save step2:引入插件 在项目中新建QRcode.vue文件 <template> <div id="qrCode"> <div id="

  • 在Vue中用canvas实现二维码和图片合成海报的方法

    在项目中经常会遇到需要将不同的二维码放到一张通用图片上,提供用户下载 简单来说,就是利用canvas将同等比例的二维码在图片上叠加,生成海报 1. 设置相应比例 一般来说海报背景都是固定的,可以直接放在public文件夹,二维码可根据后台返回数据,也可用canvas生成,在此不多赘述 import posterBgImg from '../public/images/poster_bg.png';// 海报底图 import qrcodeImg from '../public/images/qr

  • Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)

    这几天做个了项.就是微信扫描二维码的然后进入公众号网页巴拉巴拉的,然后就很顺利的遇到了在安卓端扫码的时候,顺利的一塌糊涂,然后到了苹果端的时候,就只能出现一个保存图片,然后就写一下记录一下这问题的解决方法. 问题 机型:iphone 7p 这里的二维码是一张图片,微信返回的图片,具体下图 然后是正常情况下.当我们开始扫码的时,应该是这个样子 这个是正常的,但是在苹果端的时候就懵了,下面的菜单就只有一个保存图片.那么如何解决呢,请看下面. 解决方案 解决方案其实有两种. 使用 qrcodeJs 就

  • vue 二维码长按保存和复制内容操作

    效果图: 二维码用了 qrcode.vue npm install qrcode.vue --save 复制内容用了 vue-clipboard2 npm install vue-clipboard2 --save 1.二维码保存功能: <div class="qrcode"> <qrcode-vue :size="qrcodeSize" :value="shareUrl" id="picture" >

  • VUE微信H5生成二维码海报保存在本地相册的实现

    VUE微信H5生成二维码海报保存在本地相册的实现

    目录 一.效果 二.说明 三.思路 四.效果 五.代码实现 六.遇到的问题 一.效果 二.说明 公司需求:宣传海报从后台获取,二维码地址也从后台获得,然后生成一个海报,海报上固定位置放二维码,长按图片可以保存在本地相册(其实前面的需求是点击按钮,下载海报图到本地相册,然后h5下载的实现原理是生成一个a标签链接,然后下载,在电脑模拟器可以下载,在微信浏览器一点反应没有,所以退一步,长按保存),下面是使用版本,UI插件用的是vant(有赞) vue:“^2.6.11”, “html2canvas”:

  • node实现生成带参数的小程序二维码并保存到本地功能示例

    本文实例讲述了node实现生成带参数的小程序二维码并保存到本地功能.分享给大家供大家参考,具体如下: 注意:小程序必须要上线才能获取到小程序二维码,否则会报错.. 使用node koa2框架,生成小程序二维码,需要引入两个模块 var requestp = require('request-promise'); var fs = require('fs'); // 载入fs模块 通过微信接口,获取小程序二维码,并保存到本地.返回图片名称. var wxapi = {}; module.expor

  • php生成二维码不保存服务器还有下载功能的实现代码

    有个大坑:在phpqrcode类里QRimage::png会重新定义header为header('content-type : img/png') 此header头解析不了html代码,所以在返回完后直接是一张二维码别的代码起不了任何作用,所以要返回完之后再重新声明一下header为header('Content-Type:text/html;charset=utf-8');,我在下边代码中声名过了,标红的就是 1.引入phpqrcode类(php操作二维码类) 2.调用encodePNG方法

  • Java实现获取小程序带参二维码并保存到本地

    Java实现获取小程序带参二维码并保存到本地

    目录 获取小程序带参二维码并保存到本地 业务场景 POSTMAN调试 WxUtil封装:下载带参数的小程序二维码 Controller调用 下载验证 微信小程序码的生成及保存到阿里云oss 阿里云oss工具类 获取小程序带参二维码并保存到本地 业务场景 下载并保存带参数的小程序二维码,用户直接扫描带参二维码就进入小程序,自动根据参数完成部分业务.这个时候就需要用到微信小程序提供的二维码接口 wxacode.getUnlimited ,官方文档地址 网上介绍的很多方法有些过时了,有些不科学,调用起

  • Android实现生成二维码并保存到相册

    Android实现生成二维码并保存到相册

    效果图如下 保存的图片效果是: 保存到本地的,是整个视图,不只是单单的二维码的图片, 在了解的一番过程之后,我知道了, 1.首先要去获取保存图片的写入权限:(使用 https://github.com/getActivity/XXPermissions) 2. 保存指定view的bitmap (这一步,) 3.保存到相册 直接上代码: private val mBitmapUrl = "wwwww://WL3687211525992373----" private lateinit v

  • 基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作

    基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作

    在很多项目里面,对条形码和二维码的生成和打印也是一种很常见的操作,在Web项目里面,我们可以利用JS生成条形码和二维码的组件有很多.本文引入两个比较广泛使用的JS组件,用来处理条形码和二维码的生成处理,并介绍如何利用CLODOP组件实现内容的打印输出. 生成条形码使用组件JsBarcode,生成二维码使用组件qrcodejs. 1.条形码的生成 条码的作用一般在一些商品标签上,方便使用条码枪快速.准确录入信息. 如下所示是一种条形码 这里条形码生成使用了JsBarcode组件进行处理,它支持很多

  • Python scipy的二维图像卷积运算与图像模糊处理操作示例

    本文实例讲述了Python scipy的二维图像卷积运算与图像模糊处理操作.分享给大家供大家参考,具体如下: 二维图像卷积运算 一 代码 import numpy as np from scipy import signal, misc import matplotlib.pyplot as plt image = misc.ascent()#二维图像数组,lena图像 w = np.zeros((50,50))#全0二维数组,卷积核 w[0][0]=1.0#修改参数,调整滤波器 w[49][2

  • Vue——前端生成二维码的示例

    Vue——前端生成二维码的示例

    与后端生成二维码相比,前端生成二维码更具有灵活性,下面就介绍两种前端生成二维码的方式,两种方式相比之下,vue-qr比qrcode多了一个再中间添加logo的功能. 方式一:qrcode npm npm install --save qrcodejs2 import import QRCode from 'qrcodejs2' 使用 <div class="qrcode" ref="qrCodeUrl"></div>   <script

  • 通过vue方式实现二维码扫码功能

    通过vue方式实现二维码扫码功能

    提示 这个插件只能在https协议下才能访问,http协议不好使,最好用vue2,vue3容易报错!!!!! 描述 通过vue的方式,实现扫码功能 参考文档:vue-qrcode-reader去官网–>官方文档 效果展示 实现步骤: 步骤一(安装插件) npm install --save vue-qrcode-reader 步骤二(创建组件) 因为可能多个页面都会用到,所以弄成了组件 (1)在src下面的components创建qrcode.vue (2)代码实现 // qrcode.vue

随机推荐