1. dom 生成圖片

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

html2canvas 方法的第二個(gè)入?yún)⑦€有很多選項(xiàng)可以配置，詳情請(qǐng)看這里這里

html?

1 <div class="layout"> 2 <div class="img"><img src="./poster_bg.png" /></div> 3 <p>這是一個(gè)圖片</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 插件，沒找到官網(wǎng)和git 項(xiàng)目，只有 npm 鏈接? ， => 點(diǎn)這里

這個(gè)就比較簡(jiǎn)單了，引入qrcode 之后只要以下代碼就可以拿到二維碼的圖片鏈接了

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

?

以上

?

轉(zhuǎn)載于:https://www.cnblogs.com/blackbentel/p/10728260.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。