一、前言
其實(shí)一開始搜的時(shí)候，很多還都是推薦的 vue-qrcode，于是就先用這個(gè)，但是發(fā)現(xiàn)想要在二維碼中間放一個(gè)自定義的image的時(shí)候，這個(gè)庫(kù)有點(diǎn)麻煩，需要自己將 image 圖片蓋在二維碼上面（官方教程也是如此）。好吧，一開始我也這么干了，但是蓋完之后，我需要下載這個(gè)有居中圖片的二維碼的時(shí)候，又是一個(gè)坑，因?yàn)閷?shí)際上這是兩張圖，你要下載合成的圖片的話，還需要引入生成圖片的插件。。。
于是，懷著一顆偷懶的心，又去了解了一下 vue-qr ，發(fā)現(xiàn)這個(gè)家伙既可以自己合成帶自定義圖片的二維碼，又能直接下載合成后的二維碼，而且開放的花樣參數(shù)也很多，簡(jiǎn)直太秀了！方便！妙呀！。。。but 好景不長(zhǎng)，很快發(fā)現(xiàn)一堆bug！
vue-qr bug1：生成自定義圖片二維碼，耗時(shí)特別長(zhǎng)，關(guān)鍵發(fā)到生產(chǎn)上還會(huì)有圖片資源跨域請(qǐng)求的報(bào)錯(cuò)，臨時(shí)的解決方案就是放了一張本地固定的logo圖片合成到了二維碼中間。。。vue-qr bug2：糊！太糊了！要解決這個(gè)糊的問題，只能是放大二維碼的尺寸，放大后我頁面直接丑裂開了。。。vue-qr 以上的這兩個(gè)bug也都在 issues 上提及到，樓主表示上游依賴庫(kù)年老陳舊，亦無力回天。。。
事已至此，也只能好馬也要吃回頭草，再次換上 vue-qrcode + 一個(gè)生成圖片的庫(kù)。
二、說正事
vue-qr 這個(gè)二維碼庫(kù)還是有點(diǎn)坑，二維碼和 logo都太糊了，而且還會(huì)有跨域問題！
- github: https://github.com/Binaryify/vue-qr
- 二維碼太糊-issue: https://github.com/Binaryify/vue-qr/issues/50
- 跨域同類-issue: https://github.com/Binaryify/vue-qr/issues/87
后面還是換成 vue-qrcode
- github: https://github.com/fengyuanchen/vue-qrcode
- Demo: https://fengyuanchen.github.io/vue-qrcode/#add-a-logo
兩者對(duì)比一下
- vue-qr：依賴上游框架，很老基本不維護(hù)了，用的人也少。
- vue-qrcode：相對(duì)較新，用的人更多，但是功能比較簡(jiǎn)單。
- vue-qrcode 需要二開部分：logo居中、下載圖片需要自己再合成一下。
三、其他庫(kù)：截圖 & 下載
- 截圖（生成圖片）：html2canvas
2. 下載文件（保存本地）：file-saver - 下載圖片：上面那個(gè) FileSaver 庫(kù)主要用來 下載文件 的，如果只是 下載圖片 的話大可不必，改用 a 標(biāo)簽的方法下載圖片即可。
// 看這部分的案例代碼即可
/** 下載圖片 */
function downloadImage(imgUrl, imgName) {
const a = document.createElement('a');
a.href = imgUrl;
a.download = imgName || 'image.png';
a.style.display = 'none';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
/** 生成圖片并下載 */
function downloadDivAsImage(divId) {
const div = document.getElementById(divId);
if (!div) {
console.error(`Cannot find div with id: ${divId}`);
return;
}
html2canvas(div, {
allowTaint: true,
useCORS: true,
}).then(canvas => {
const image = canvas.toDataURL('image/png');
downloadImage(image, `${divId}.png`);
});
}
3.1 安裝
npm install html2canvas
#或
yarn add html2canvas
#或
pnpm add html2canvas
3.2 使用（下載文件的話可以參考這個(gè)例子）
在前端開發(fā)中，如果你想將 HTML 頁面中的某個(gè)
html2canvas 可以將 HTML 元素轉(zhuǎn)換為 元素，然后你可以使用 canvas.toDataURL() 方法將其轉(zhuǎn)換為圖片。接著，你可以使用 FileSaver.js 來保存這個(gè)圖片到本地。文章來源：http://www.zghlxwxcb.cn/news/detail-853893.html
import html2canvas from 'html2canvas';
import { saveAs } from 'file-saver';
function downloadDivAsImage(divId) {
const div = document.getElementById(divId);
if (!div) {
console.error(`Cannot find div with id: ${divId}`);
return;
}
html2canvas(div).then(canvas => {
const image = canvas.toDataURL('image/png');
const blob = dataURItoBlob(image);
saveAs(blob, `${divId}.png`);
});
}
function dataURItoBlob(dataURI) {
const byteString = atob(dataURI.split(',')[1]);
const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
const ab = new ArrayBuffer(byteString.length);
const ia = new Uint8Array(ab);
for (let i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], { type: mimeString });
}
// 使用方法：傳入你想下載的 div 的 id
downloadDivAsImage('yourDivId');
3.3 html2canvas圖片截圖失?。▓D片資源跨域問題）
我的應(yīng)用場(chǎng)景就涉及到第三方圖片截圖失敗的問題，這里需要對(duì) html2canvas-options 做一些跨域處理的配置，如下：
文章來源地址http://www.zghlxwxcb.cn/news/detail-853893.html
3.4 其他注意事項(xiàng)
- 確保你的 div 內(nèi)容是可見的，因?yàn)?html2canvas 只能捕獲可見的內(nèi)容。
- 由于跨域問題，如果
中的圖片或其他資源來自其他域，可能會(huì)遇到問題。確保所有資源都是同源的，或者已經(jīng)設(shè)置了適當(dāng)?shù)?CORS 策略。關(guān)于 html2canvas 一些配置可以參考： html2canvas-options
到了這里，關(guān)于【vue-qrcode + html2canvas】前端二維碼生成與下載的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
