大家好，我是你的好朋友思创斯。今天说一说vue海报二维码组合图片生成和下载-qrcodejs2-html2canvas「终于解决」,希望您对编程的造诣更进一步.
npm install qrcodejs2 --save
npm install html2canvas --save是否还在为ide开发工具频繁失效而烦恼，来吧关注以下公众号获取最新激活方式。亲测可用！
【正版授权，激活自己账号】：
【官方授权 正版激活】：
//项目中使用 - 需要的地方直接引入使用即可
import qrcode from "qrcodejs2";
import html2canvas from "html2canvas";
//二维码生成
/**
* @description 生成二维码
* @param {number} qwidth 宽度
* @param {number} qheight 高度
* @param {string} qtext 二维码内容（跳转连接）
* @param {string} qrender 渲染方式（有两种方式 table和canvas，默认是canvas）
*/
qrcode(qwidth, qheight, qtext, qrender) {
// 清空二维码
this.$refs.qrcodediv.innerhtml = "";
new qrcode(this.$refs.qrcodediv, {
width: qwidth,
height: qheight,
text: qtext,
render: qrender,
colordark: "#000000",
colorlight: "#ffffff",
correctlevel: qrcode.correctlevel.l,
});
},
// 生成海报
cancel() {
const dialog = this.$refs.dialog;
this.createqrcodepic();
window.pageyoffset = 0;
document.documentelement.scrolltop = 0;
document.body.scrolltop = 0;
html2canvas(this.$refs.dialog, {
usecors: true, //设置为true，避免图片产生跨域
logging: true,
allowtaint: false,
width: dialog.offsetwidth,
height: dialog.offsetheight,
scale: window.devicepixelratio || 1,
backgroundcolor: null,
}).then((canvas) => {
let dataurl = canvas.todata;
console.log("dataurl", dataurl);
this.htmlurl = dataurl;
});
},
// 下载图片
downloadbtn() {
var link = document.createelement("a");
link.href = this.htmlurl;
console.log(link.href);
link.download = "poster-download.png";
settimeout(() => {
link.click();
}, 1000);
},js555888金沙老品牌的版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由思创斯整理,转载请注明出处：https://ispacesoft.com/120564.html