H5生成二维码并将页面转成图片，长按保存到相册，也可转发

H5生成二维码并将页面转成图片，长按保存到相册，也可转发

保存到相册只能适用于浏览器，在APP中不适用。保存到相册功能可以让APP端写截屏功能调用相册。
(调用APP端方法的话，不如他们自己写，调用也是他们先写，你再调用)
安装

1，使用qrcodejs2生成二维码；

npm install qrcodejs2 --save 

2,使用html2canvas生成图片；

npm install html2canvas --save

1.先看整体

<template>// 根据id来生成图片<div class="" id="captureId">// H5的具体内容firstFlag显示<div class="" v-show="firstFlag"><img class="" src="../assets/yaoqingfenxiang/title.png" alt="" /><img class="" src="../assets/yaoqingfenxiang/content.png" alt="" /><div class="">邀请好友完成非首发购买，可获得两个盲盒div><div class="">体验更多玩法快快加入div><div class=""><div style=""><div><div class="">限量盲盒 立即扫码领取div><div class="">因喜欢而收藏div>div>// 生成二维码<div class="footimg" ref="qrCodeUrl">div>div><div class="">长按保存到相册div>div>div>// 将H5转成的图片显示出来，同时隐藏H5内容<img:src="dataURL"alt=""v-show="!firstFlag"style="width: 100%; height: 100%"/>div>
template>

<script>
import QRCode from "qrcodejs2";
import html2canvas from "html2canvas";
export default {data() {return {qrcode: "",yaoqingma: "", dataURL: "", // 保持截屏操作后的base64数据地址firstFlag: true, // 显示的图层};},created() {// 获取APP使用H5链接时传递的参数let url = window.location.href;let params = url.substr(url.lastIndexOf("?") + 1);console.log(params);this.yaoqingma = params;console.log(this.yaoqingma);},mounted() {this.creatQrCode();// 通过id将页面转成图片，图片长按可保存至相册，可转发html2canvas(document.querySelector("#captureId")).then((canvas) => {let imgUrl = canvas.toDataURL("image/png");this.dataURL = imgUrl;this.firstFlag = false;});},methods: {// 生成二维码 text:二维码要跳转的链接，可加参数creatQrCode() {this.qrcode = new QRCode(this.$refs.qrCodeUrl, {text:"http://front.lianstreets.com/register?inviteCode=" + this.yaoqingma, // 需要转换为二维码的内容width: 74,height: 74,colorDark: "#000000",colorLight: "#ffffff",correctLevel: QRCode.CorrectLevel.H,});},},
};
script>

2.生成二维码

<div class="footimg" ref="qrCodeUrl">div>

<script>
import QRCode from "qrcodejs2";
export default {data() {return {qrcode: "",yaoqingma: "", };},created() {let url = window.location.href;let params = url.substr(url.lastIndexOf("?") + 1);console.log(params);this.yaoqingma = params;console.log(this.yaoqingma);},mounted() {this.creatQrCode();},methods: {creatQrCode() {this.qrcode = new QRCode(this.$refs.qrCodeUrl, {text:"http://front.lianstreets.com/register?inviteCode=" + this.yaoqingma, // 需要转换为二维码的内容width: 74,height: 74,colorDark: "#000000",colorLight: "#ffffff",correctLevel: QRCode.CorrectLevel.H,});},},
};
script>

3.将H5转换成图片

  <div class="" id="captureId" v-show="firstFlag">div><img:src="dataURL"alt=""v-show="!firstFlag"style="width: 100%; height: 100%"/>

<script>
import QRCode from "qrcodejs2";
export default {data() {return {dataURL: "", // 保持截屏操作后的base64数据地址firstFlag: true, // 显示的图层};},created() {},mounted() {html2canvas(document.querySelector("#captureId")).then((canvas) => {let imgUrl = canvas.toDataURL("image/png");this.dataURL = imgUrl;this.firstFlag = false;});},methods: {},
};
script>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！