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

 

以上

 

posted @ 2019-04-18 10:48  blackbentel  阅读(621)  评论(0)  编辑  收藏  举报