需求:一个页面进来有多个用户的二维码门票信息,产品需要求底部有个保存图片的按钮,直接将html生成长图进行保存
首先说明:在H5中,无法实现一键保存的功能。只能通过h5自带的长按保存实现
实现思路:
首先通过html2canvas通过截图将html转为canvas长图,然后在通过将html2canvas生成的图片信息覆盖在原有的页面上,这样用户在长按的时候其实按住的就是长图了,然后就能保存。
步骤一:安装html2canvas
npm install html2canvas
or
yarn add html2canvas
步骤二:引入html2canvas及使用
import html2canvas from "html2canvas";
//html代码
<div id="qrcode" ref="qrcodeBox" class="detail-wrap">
// 内容区域
</div>
下面的代码中使用setTimeout是因为在需求中还需要渲染二维码的图片,添加 setTim