|
H5生成二维码并将页面转成图片，长按保存到相册，也可转发
保存到相册只能适用于浏览器，在APP中不适用。保存到相册功能可以让APP端写截屏功能调用相册。 (调用APP端方法的话，不如他们自己写，调用也是他们先写，你再调用) 安装
1，使用qrcodejs2生成二维码；
npm install qrcodejs2 --save
2,使用html2canvas生成图片；
npm install html2canvas --save
1.先看整体
// 根据id来生成图片
// H5的具体内容firstFlag显示
邀请好友完成非首发购买，可获得两个盲盒
体验更多玩法快快加入
限量盲盒 立即扫码领取
因喜欢而收藏
// 生成二维码
长按保存到相册
// 将H5转成的图片显示出来，同时隐藏H5内容
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,
});
},
},
};
2.生成二维码
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,
});
},
},
};
3.将H5转换成图片
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: {
},
};
|