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>

 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 生成图片和链接生成二维码相关推荐

js前端根据链接生成二维码并转成图片下载
js前端根据链接生成二维码并转成图片下载依赖于jquery.jquery.qrcode.min.js 1.html <div class="qrcode"></ ...
js实现将链接生成二维码，并对生成的二维码转换为图片，右击可保存至本地
在vue项目中,实现将链接生成二维码:可识别跳转,将生成的二维码可转换成图片,并可保存至本地.具体操作步骤如下: 1.安装及引用首先,实现这个功能需要使用QRCode和html2canvas,所以在 ...
java 根据指定链接生成二维码
需求: 就是需要把一个报告网址链接生成二维码,然后渲染在报告中,扫描二维码的时候能访问到这个报告,效果就达到了 1.首先提前需要添加的maven依赖 <!-- https://mvnreposi ...
链接生成二维码( QRCode )
Vue中链接生成二维码安装插件 sudo npm install qrcodejs2 --save 页面中引入 import QRCode from "qrcodejs2"; c ...
iOS常用功能 - 根据链接生成二维码图片
根据链接生成二维码 1 -(void)generatingTwoDimensionalCode { 2 3 // 创建过滤器 4 CIFilter *filter = [CIFilter filter ...
百万前端之js通过链接生成二维码可以保存下载复制
在前端工作中,会遇到很多邀请好友的需求,这个时候就需要前端对需求进行实现了. 最终效果: 这个是做好以后的成品,根据链接生成二维码,提供保存二维码和复制链接功能,纯前端实现.话不多说直接上代码 htm ...
Python 二维码的读取与生成：使用链接生成二维码、读取二维码里的链接
Python 二维码的读取与生成演示 ① 使用链接生成二维码 ② 读取二维码里的链接 [ 文章推荐 ] Python 绘制中国地图:使用 pyecharts 最新版本绘制中国地图实例详解,个性化地图定 ...
使用IDEA创建一个通过url链接生成二维码的java程序|自动生成二维码
平时使用了那么多的二维码,今天我们自己做一个二维码.今天刚安装了IDEA,学会了用法,就来通过IDEA做一个生成二维码的程序. 首先新建一个项目设置项目名称点击Next之后,出现下图所示页面: ...
vue 根据链接生成二维码(功能实现)
今天同事问我一个问题,在vue项目中想要根据一个链接显示对应的二维码该怎么实现. 我前一段时间,有用apicloud项目生成二维码的功能,但是vue版本的没有处理过.百度后找到一个可行的方案: 大神实 ...

dom 生成图片和链接生成二维码

dom 生成图片和链接生成二维码相关推荐

最新文章

热门文章