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) })

?

以上

?

轉載于:https://www.cnblogs.com/blackbentel/p/10728260.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的dom 生成图片和链接生成二维码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。