先npm install 安装这俩个插件,然后导入需要的页面中
二维码:
//第一步:引入:
import Qrcode from "@xkeshi/vue-qrcode";
// 第二步:注册:
components: {
qrcode: Qrcode //二维码的插件需要注册组件
},
// 第三步:使用:
<template>
<qrcode :value="qrcodeUrl" style="width: 72px;height: 72px"></qrcode>
<template>Ï
// 第四步:
qrcodeUrl: 'https://baidu.com' // 自己定义地址
生成海报:
现在页面上写好海报的样式,然后通过this.$refs.xxx获取到节点传入html2canvas方法方法中,再赋值给img标签显示,浏览器默认图片自带保存功能
mage.crossOrigin支持跨域图片 这个一定要放在src赋值之前,否则再ios手机上图片显示不出来
import html2canvas from "html2canvas";
// 调用:
html2canvas(this.$refs.xxxx, { backgroundColor: null }).then(
canvas => {
// 转成图片,生成图片地址
this.imgUrl = canvas.toDataURL("image/png");
this.canvasShow = true;
}
);
海报一般都有接口返回的网络图,因为canvas无法绘制网络图,所以要下载到本地再调用html2canvas方法
handelCanvas() {
const datas = {
AlbumId: this.albumIdId
};
this.$axios.post(this.api.xxxxx, datas).then(res => {
// console.log("分享快照==>", res);
this.albumsShare = res.data;
var that = this;
this.main(res.data.HeadImg, function(base64) {
that.HeadImg = base64;
});
res.data.AlbumImage = res.data.AlbumImage.substring(
0,
res.data.AlbumImage.indexOf("?")
);
console.log(res.data.AlbumImage);
this.main(res.data.AlbumImage, function(base64) {
that.AlbumImage = base64;
});
});
},
// 将图片转base64
getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var dataURL = canvas.toDataURL("image/png"); // 可选其他值 image/jpeg
return dataURL;
},
// 下载网络图片
main(src, cb) {
var image = new Image();
image.crossOrigin = "*"; // 支持跨域图片 这个一定要放在src赋值之前,否则再ios手机上图片显示不出来
image.src = src + "?v=" + Math.random(); // 处理缓存
var that = this;
image.onload = function() {
var base64 = that.getBase64Image(image);
cb && cb(base64);
};
},