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

近日，重構項目某一老模塊時，有一個功能是生成二維碼并下載，還可以復制鏈接。列表每項都有二維碼、下載二維碼和復制鏈接和列表上方總的二維碼。
老模塊是用的qrocode中文文檔，qrcode github。

先想著新模塊中是否有生成二維碼的插件，看了下package.json。
有安裝一個vue-qriously。但搜索了一下，竟然沒有使用，可能是因為很多二維碼都是后端生成返回鏈接給前端的。而在其他H5、微信項目中使用了。看了下這個項目star數是113。但我不想重新引入老模塊的qrcodejs，重新引入其他的二維碼插件，相對比較麻煩。于是就保持統一用vue-qriously了。
猜想當時引入這個是vue 資源合集awesome-vue中，qrcode相關第一個就是vue-qriously。

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

// vue 文件

更多參數配置可以查看：github 倉庫 v-qriously.vue源碼
查看代碼可以發現，開頭引用了qrious，這個star就多一點，600多。

import Qrious from "qrious"

qrious github 地址
qrious 文檔

粗略的翻看下以上相關文檔，寫完正準備要做下載功能。這時發現，哎呀，竟然就是只生成了一個canvas。
于是百度(暴露了用百度...我也想用谷歌，但現在不行...)了下canvas如何轉圖片。
stackoverflow Capture HTML Canvas as gif/jpg/png/pdf?

var canvas = document.getElementById("mycanvas");
var imgSrc    = canvas.toDataURL("image/png");
document.write("");
// 搜索到一些其他的方案，感覺挺麻煩。
// 嗯，這個簡單。想著我們項目兼容性沒什么要求，于是就用這個了。

生成了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);

但這樣寫也相對比較麻煩。
項目中封裝了一個v-click指令。

/**
 * vClick 觸發點擊
 * @type {Object}
 */
export const vClick = {
    directives: {
        click: {
            /**
             * 值更新時候觸發點擊
             * @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();
                }
            },
        },
    },
};

這就實現了下載的資源是160 * 160，用樣式控制圖片顯示80 * 80。
代碼寫完，覺得應該給vue-qriously寫個pr,實現 不僅僅是渲染canvas，而是讓大家可以選擇時img還是canvas。又去翻了翻這個項目的issue,有一個issue鏈接：how to make this canvas exchange to img 就是說的這個。還沒關閉。

i think u can create type let user select img and canvas.

// 有一個回復
If you want to make it become downloadable, maybe you can transform it from canvas easily by canvas.toDataURL()

文章寫到這里，我發現這樣似乎不太妥。我的場景，是點擊時顯示浮層（浮層有二維碼和復制鏈接地址和下載二維碼按鈕等），獲取canvas元素，去轉成img src，再去渲染到頁面，而且圖片可能會閃，因為是實際大小是160，樣式強制控制在80。
何不生成兩份，一份是用來獲取資源下載的。一份用來顯示的。嗯，之后去優化下。
順帶說一下，復制粘貼

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

新模塊還沒使用過，但依然使用這個。

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