摘要：近日，重構(gòu)項(xiàng)目某一老模塊時(shí)，有一個(gè)功能是生成二維碼并下載，還可以復(fù)制鏈接。先想著新模塊中是否有生成二維碼的插件，看了下。項(xiàng)目中封裝了一個(gè)指令。一份用來顯示的。順帶說一下，復(fù)制粘貼復(fù)制粘貼老模塊中是用的倉庫。

近日，重構(gòu)項(xiàng)目某一老模塊時(shí)，有一個(gè)功能是生成二維碼并下載，還可以復(fù)制鏈接。列表每項(xiàng)都有二維碼、下載二維碼和復(fù)制鏈接和列表上方總的二維碼。
老模塊是用的qrocode中文文檔，qrcode github。

先想著新模塊中是否有生成二維碼的插件，看了下package.json。
有安裝一個(gè)vue-qriously。但搜索了一下，竟然沒有使用，可能是因?yàn)楹芏喽S碼都是后端生成返回鏈接給前端的。而在其他H5、微信項(xiàng)目中使用了?？戳讼逻@個(gè)項(xiàng)目star數(shù)是113。但我不想重新引入老模塊的qrcodejs，重新引入其他的二維碼插件，相對比較麻煩。于是就保持統(tǒng)一用vue-qriously了。
猜想當(dāng)時(shí)引入這個(gè)是vue 資源合集awesome-vue中，qrcode相關(guān)第一個(gè)就是vue-qriously。

// 入口js文件
// npm install vue-qriously -S
import Vue from "vue";
import VueQriously from "vue-qriously";
Vue.use(VueQriously);

// vue 文件

更多參數(shù)配置可以查看：github 倉庫 v-qriously.vue源碼
查看代碼可以發(fā)現(xiàn)，開頭引用了qrious，這個(gè)star就多一點(diǎn)，600多。

import Qrious from "qrious"

qrious github 地址
qrious 文檔

粗略的翻看下以上相關(guān)文檔，寫完正準(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("");
// 搜索到一些其他的方案，感覺挺麻煩。
// 嗯，這個(gè)簡單。想著我們項(xiàng)目兼容性沒什么要求，于是就用這個(gè)了。

生成了img的src資源，那么就可以下載了。

// 老模塊是用的`jquery` + `seajs` + `vue1.x`
// 新模塊盡量要去除`jquery`。
let src = $(".img").src;
let aLink = $("").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àng)目中封裝了一個(gè)v-click指令。

/**
 * vClick 觸發(fā)點(diǎn)擊
 * @type {Object}
 */
export const vClick = {
    directives: {
        click: {
            /**
             * 值更新時(shí)候觸發(fā)點(diǎn)擊
             * @author 軒轅Rowboat 
             * @date   2018-05-15
             * @param  {HTMLElement} el                指令所綁定的元素
             * @param  {Boolean}     options.value     綁定值(新)
             * @param  {Boolean}     options.oldValue  綁定值(舊)
             */
            update(el, { value, oldValue }){
                if(value && !oldValue){
                    el.click();
                }
            },
        },
    },
};

這就實(shí)現(xiàn)了下載的資源是160 * 160，用樣式控制圖片顯示80 * 80。
代碼寫完，覺得應(yīng)該給vue-qriously寫個(gè)pr,實(shí)現(xiàn) 不僅僅是渲染canvas，而是讓大家可以選擇時(shí)img還是canvas。又去翻了翻這個(gè)項(xiàng)目的issue,有一個(gè)issue鏈接：how to make this canvas exchange to img 就是說的這個(gè)。還沒關(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()

文章寫到這里，我發(fā)現(xiàn)這樣似乎不太妥。我的場景，是點(diǎn)擊時(shí)顯示浮層（浮層有二維碼和復(fù)制鏈接地址和下載二維碼按鈕等），獲取canvas元素，去轉(zhuǎn)成img src，再去渲染到頁面，而且圖片可能會(huì)閃，因?yàn)槭菍?shí)際大小是160，樣式強(qiáng)制控制在80。
何不生成兩份，一份是用來獲取資源下載的。一份用來顯示的。嗯，之后去優(yōu)化下。
順帶說一下，復(fù)制粘貼

老模塊中是用的cliploardclipboard github倉庫。就是我引入的。

新模塊還沒使用過，但依然使用這個(gè)。

// 安裝
// npm install clipboard --save