dom 生成圖片和連接生成二維碼

1. dom 生成圖片

此處使用的是 html2canvas 插件 和canvas2image插件

html2canvas 方法的第二個入參還有不少選項能夠配置，詳情請看這裏這裏

html 

1   <div class="layout">
2     <div class="img"><img src="./poster_bg.png"    /></div>
3     <p>這是一個圖片</p>
4   </div>
5   <canvas id="theCanvas"></canvas>
6   <button id="btn">下載圖片</button>

js

 1     window.onload = function () {
 2       var dom = document.querySelector('.layout')
 3       var c = document.querySelector('#theCanvas')
 4         document.querySelector('#btn').onclick = function () {
 5         html2canvas(dom, {
 6           canvas: c,
 7         }).then(function() {
 8           var img = Canvas2Image.saveAsPNG(c, true)
 9           let a = document.createElement('a')
10           a.href = img.src
11           a.download = true
12           a.click()
13         });
14       }
15     }

 

 

2. 連接生成二維碼

這裏使用的是 qrcode 插件，沒找到官網和git 項目，只有 npm 連接  ， => 點這裏

這個就比較簡單了，引入qrcode 以後只要如下代碼就能夠拿到二維碼的圖片連接了

QRCode.toDataURL('http://www.zhihu.com').then(src => {
    callback(src)
})

 

以上