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

2024-11-01 19:00:50

效果图：

二维码用了 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 二维码长按保存和复制内容操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

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

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

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

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

目录一.效果二.说明三.思路四.效果五.代码实现六.遇到的问题一.效果二.说明公司需求:宣传海报从后台获取,二维码地址也从后台获得,然后生成一个海报,海报上固定位置放二维码,长按图片可以保存在本地相册(其实前面的需求是点击按钮,下载海报图到本地相册,然后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实现获取小程序带参二维码并保存到本地

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

效果图如下保存的图片效果是: 保存到本地的,是整个视图,不只是单单的二维码的图片, 在了解的一番过程之后,我知道了, 1.首先要去获取保存图片的写入权限:(使用 https://github.com/getActivity/XXPermissions) 2. 保存指定view的bitmap (这一步,) 3.保存到相册直接上代码: private val mBitmapUrl = "wwwww://WL3687211525992373----" private lateinit v
基于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-qr比qrcode多了一个再中间添加logo的功能. 方式一:qrcode npm npm install --save qrcodejs2 import import QRCode from 'qrcodejs2' 使用 <div class="qrcode" ref="qrCodeUrl"></div> <script
通过vue方式实现二维码扫码功能

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

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

相关推荐

随机推荐