近日，重構(gòu)項(xiàng)目某一老模塊時(shí)，有一個(gè)功能是生成二維碼并下載，還可以復(fù)制鏈接。列表每項(xiàng)都有二維碼、下載二維碼和復(fù)制鏈接和列表上方總的二維碼。
老模塊是用的qrocode中文文檔，qrcode github。
先想著新模塊中是否有生成二維碼的插件，看了下package.json。
有安裝一個(gè)vue-qriously。但搜索了一下，竟然沒(méi)有使用，可能是因?yàn)楹芏喽S碼都是后端生成返回鏈接給前端的。而在其他H5、微信項(xiàng)目中使用了?？戳讼逻@個(gè)項(xiàng)目star數(shù)是113。但我不想重新引入老模塊的qrcodejs，重新引入其他的二維碼插件，相對(duì)比較麻煩。于是就保持統(tǒng)一用vue-qriously了。
猜想當(dāng)時(shí)引入這個(gè)是vue 資源合集awesome-vue中，qrcode相關(guān)第一個(gè)就是vue-qriously。
vue-qriously插件使用
// 入口js文件
// npm install vue-qriously -S
import Vue from 'vue';
import VueQriously from 'vue-qriously';
Vue.use(VueQriously);
// vue 文件
<template>
<qriously :value="value" size="size" :backgroundAlpha="backgroundAlpha"/>
</template>
<script>
export default {
name: 'app',
data(){
return {
// 可以自定義，必填項(xiàng)。
value: 'http://lxchuan12.github.io/',
// 二維碼大小 默認(rèn) 100
size: 80,
// 背景透明度，默認(rèn)透明 0
backgroundAlpha： 1,
}
}
}
</script>
更多參數(shù)配置可以查看：github 倉(cāng)庫(kù) v-qriously.vue源碼
查看代碼可以發(fā)現(xiàn)，開(kāi)頭引用了qrious，這個(gè)star就多一點(diǎn)，600多。
import Qrious from 'qrious'
下載二維碼
粗略的翻看下以上相關(guān)文檔，寫(xiě)完正準(zhǔn)備要做下載功能。這時(shí)發(fā)現(xiàn)，哎呀，竟然就是只生成了一個(gè)canvas。
于是百度(暴露了用百度...我也想用谷歌，但現(xiàn)在不行...)了下canvas如何轉(zhuǎn)圖片。
stackoverflow Capture HTML Canvas as gif/jpg/png/pdf?
var canvas = document.getElementById("mycanvas");
var imgSrc = canvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');
// 搜索到一些其他的方案，感覺(jué)挺麻煩。
// 嗯，這個(gè)簡(jiǎn)單。想著我們項(xiàng)目兼容性沒(méi)什么要求，于是就用這個(gè)了。
生成了img的src資源，那么就可以下載了。
// 老模塊是用的`jquery` + `seajs` + `vue1.x`
// 新模塊盡量要去除`jquery`。
let src = $('.img').src;
let aLink = $('<a></a>').attr('href', src).attr('download', 'xxx二維碼.png').appendTo('body');
aLink[0].click();
aLink.remove();
// 新模塊 去除jquery
let elem = document.createElement('a');
elem.setAttribute('href', imgSrc);
elem.setAttribute('download', 'xxx二維碼.png');
document.body.appendChild(elem);
elem.click();
document.body.removeChild(elem);
但這樣寫(xiě)也相對(duì)比較麻煩。
項(xiàng)目中封裝了一個(gè)v-click指令。
/**
* vClick 觸發(fā)點(diǎn)擊
* @type {Object}
*/
export const vClick = {
directives: {
click: {
/**
* 值更新時(shí)候觸發(fā)點(diǎn)擊
* @author 軒轅Rowboat <lxchuan12@163.com>
* @date 2018-05-15
* @param {HTMLElement} el 指令所綁定的元素
* @param {Boolean} options.value 綁定值(新)
* @param {Boolean} options.oldValue 綁定值(舊)
*/
update(el, { value, oldValue }){
if(value && !oldValue){
el.click();
}
},
},
},
};
<template>
<div>
<div class="img" v-show="listShareShow">
<qriously id="qriously" :backgroundAlpha="1" :value="listSharingLink" :size="160" v-show="false"/>
<img :src="listSharingLinkSrc" alt="xxx二維碼">
</div>
<a :href="exportLink" v-click="download" :download="downloadFilename"></a>
<a @click.stop="listShare">查看鏈接/二維碼</a>
</div>
</template>
<script>
export default {
// 提取出主要代碼
data(){
retrun {
// 下載
download: false,
downloadFilename: 'xxx二維碼',
listSharingLinkSrc: '',
listSharingLinkSrc: '',
listShareShow: false,
}
},
// ...
methods: {
/**
* 查看鏈接/二維碼
* @author 軒轅Rowboat <lxchuan12@163.com>
* @date 2018-05-15
*/
listShare(event){
if(!this.listSharingLinkSrc){
let canvas = document.querySelector('#qriously canvas');
let imgSrc = canvas.toDataURL('image/png');
this.listSharingLinkSrc = imgSrc;
}
this.listShareShow = !this.listShareShow;
},
/**
* 表格上方：下載二維碼列表
* @author 軒轅Rowboat <lxchuan12@163.com>
* @date 2018-05-15
*/
downloadQrcode(event, linkSrc, downloadFilename){
event.stopPropagation();
this.exportLink = linkSrc;
this.downloadFilename = downloadFilename;
this.download = true;
this.$nextTick(() => {
this.exportLink = '';
this.download = false;
this.downloadFilename = '';
});
},
},
};
</script>
代碼寫(xiě)到這里，嗯，實(shí)現(xiàn)完了下載。但又發(fā)現(xiàn)又一需求，顯示大小是80 * 80，下載需要是160 * 160。
顯示大小和下載大小不一樣。
參考了下老模塊，qrcodejs渲染出來(lái)的html,
// 跟這個(gè)類(lèi)似
<div id="qrcode_1" title="your content">
<canvas width="256" height="256" style="display: none;"></canvas>
<img alt="Scan me!" style="display: block;" src="data:image/png;base64,xxx">
</div>
vue-qriously渲染出來(lái)是
<div>
<canvas width="80" width="80"></canvas>
</div>
于是我可以把生成的imgSrc資源,
<template>
<div>
<canvas width="160" width="160" v-show="false"></canvas>
<img class="img" :src="imgSrc"/>
</div>
</template>
<style lang="less">
.img{
width: 80px;
height: 80px;
}
</style>
這就實(shí)現(xiàn)了下載的資源是160 * 160，用樣式控制圖片顯示80 * 80。
代碼寫(xiě)完，覺(jué)得應(yīng)該給vue-qriously寫(xiě)個(gè)pr,實(shí)現(xiàn) 不僅僅是渲染canvas，而是讓大家可以選擇時(shí)img還是canvas。又去翻了翻這個(gè)項(xiàng)目的issue,有一個(gè)issue鏈接：how to make this canvas exchange to img 就是說(shuō)的這個(gè)。還沒(méi)關(guān)閉。
i think u can create type let user select img and canvas.
// 有一個(gè)回復(fù)
If you want to make it become downloadable, maybe you can transform it from canvas easily by canvas.toDataURL()
文章寫(xiě)到這里，我發(fā)現(xiàn)這樣似乎不太妥。我的場(chǎng)景，是點(diǎn)擊時(shí)顯示浮層（浮層有二維碼和復(fù)制鏈接地址和下載二維碼按鈕等），獲取canvas元素，去轉(zhuǎn)成img src，再去渲染到頁(yè)面，而且圖片可能會(huì)閃，因?yàn)槭菍?shí)際大小是160，樣式強(qiáng)制控制在80。
何不生成兩份，一份是用來(lái)獲取資源下載的。一份用來(lái)顯示的。嗯，之后去優(yōu)化下。
順帶說(shuō)一下，復(fù)制粘貼
cliploard 復(fù)制粘貼
老模塊中是用的cliploardclipboard github倉(cāng)庫(kù)。就是我引入的。
新模塊還沒(méi)使用過(guò)，但依然使用這個(gè)。
// 安裝
// npm install clipboard --save
<template @click="Clip($event, '快來(lái)復(fù)制')"><template>
// 封裝成一個(gè)函數(shù)
import Clipboard from 'clipboard';
export default function Clip(event，text) {
const clipboard = new Clipboard(event.target, {
text: () => text
});
clipboard.on('success', () => {
console.log('復(fù)制成功');
clipboard.off('error');
clipboard.off('success');
clipboard.destroy();
});
clipboard.on('error', () => {
console.log('復(fù)制失敗，請(qǐng)刷新試試');
clipboard.off('error')
clipboard.off('success')
clipboard.destroy()
});
clipboard.onClick(event);
}
當(dāng)然也可以封裝成vue指令。
可以參考vue-element-admin這個(gè)項(xiàng)目
之前我看的時(shí)候還是3000多star，現(xiàn)在1.2w+，說(shuō)明值得學(xué)習(xí)。
另外推薦awesomes網(wǎng)站 工具類(lèi)庫(kù)合集
關(guān)于
作者：常以軒轅Rowboat為名混跡于江湖。前端路上 | PPT愛(ài)好者 | 所知甚少，唯善學(xué)。
個(gè)人博客
segmentfault個(gè)人主頁(yè)
掘金個(gè)人主頁(yè)
知乎
github
小結(jié)
1、引入第三方插件等使用時(shí)，多查看github 文檔 issue等，在技術(shù)社區(qū)搜索別人使用的方案。
2、選用第三方插件時(shí)，盡可能挑選star比較多的，issue處理比較及時(shí)的，在更新維護(hù)的。
3、富余時(shí)間可以多研究下別人的項(xiàng)目是如何組織文件，和實(shí)現(xiàn)的一些常用功能的。
4、盡可能去優(yōu)化自己的代碼，總結(jié)回顧。
文章首發(fā)于Segmentfault vue 2.x項(xiàng)目 vue-qriously 生成二維碼并下載、cliploard復(fù)制粘貼
