1、分别引入 qrcodejs2、html2canvas
執行以下指令行
npm install qrcodejs2
npm install html2canvas
2、下載下傳canvas2image,切記是下載下傳源碼至本地,不是安裝
2.1、`建立canvas2image.js檔案夾
var Canvas2Image = function () {
// 這裡面放canvas2image源碼
}
export default Canvas2Image`
2.2、在使用的頁面引入對應的檔案如下:
import QRCode from "qrcodejs2";
import html2canvas from 'html2canvas';
import Canvas2Image from '@/libs/canvas2image';
如果一定要安裝:canvas2image,你可以試試,會報錯導緻找不到對應的Canvas2Image.convertToPNG()方法
3、DOM結構如下
<div class="main">
<!-- 海報 html 元素 -->
<div id="posterHtml" ref="posterHtml" >
<div class="posterHtml">
<!-- :src="posterHtmlBg" -->
<img
src="@/assets/111.jpg"
style="width:100%;height:100%"
>
<div class="posterklass">我是文本,邀請您:</div>
<!-- 二維碼 -->
<!-- <div id="qrcodeImg" v-if="postcode"></div> -->
<div id="qrcodeImg" ></div>
</div>
</div>
<div id="myCanvas" class="my_canvas"></div>
<span class="tip">長按儲存該海報,邀請好友來測!</span>
</div>
4、執行腳本
4.1、生成二維碼
createQrcode(text) {
// 生成二維碼
const qrcodeImgEl = document.getElementById("qrcodeImg");
qrcodeImgEl.innerHTML = "";
let width = document.documentElement.clientWidth;
width = width * 0.32;
let qrcode = new QRCode(qrcodeImgEl, {
width: width,
height: width,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
qrcode.makeCode(text);
this.createPoster();
},
4.2、合成海報
createPoster() {
// 生成海報
const that = this;
// const domObj = document.getElementById("posterHtml");
const domObj = that.$refs.posterHtml;
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
var canvas = document.createElement("canvas");
// 為了防止合成的圖檔失真,需要将圖檔擴大2倍;
var scale = 2;
canvas.width = width * scale;
canvas.height = height * scale;
// 由于合成的圖檔需要展示在目前頁面;再将繪畫的圖檔縮放
canvas.getContext("2d").scale(1, 1);
var opts = {
scale: scale,
canvas: canvas,
logging: true,
width: width,
height: height,
useCORS: true,
allowTaint: false,
logging: false,
letterRendering: true,
};
html2canvas(domObj, opts).then(function(canvas) {
var context = canvas.getContext("2d");
// 重要 關閉抗鋸齒
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
var img = Canvas2Image.convertToPNG(
canvas,
canvas.width,
canvas.height
);
// Canvas2Image.saveAsPNG(canvas, canvas.width, canvas.height)
that.postshow = false;
that.postcode = false;
// img.style.width = canvas.width / 2 + "px";
// img.style.height = canvas.height / 2 + "px";
img.style.width = '100%';
img.style.height = '100%';
img.style.position = "absolute";
img.style.top = "0px";
img.style.left = "0px";
document.getElementById("myCanvas").appendChild(img);
that.$nextTick(() => {
let e = document.querySelector("#posterHtml");
e.style.display = "none";
})
});
}
4.2.1、生成海報注意事項:
a、建立的canvas寬高一定要記得擴大一倍;
如:
`var canvas = document.createElement("canvas");
// 為了防止合成的圖檔失真,需要将圖檔擴大2倍;
var scale = 2;
canvas.width = width * scale;
canvas.height = height * scale;`
b、為了展示在目前手機螢幕中,(合成圖檔自适應);
需要将圖檔縮放。如:
// 由于合成的圖檔需要展示在目前頁面;再将繪畫的圖檔縮放
canvas.getContext("2d").scale(1, 1);