h5基于html2canvas实现保存图片到手机相册 |
您所在的位置：网站首页 › 知乎文章专栏会员怎么保存到手机相册 › h5基于html2canvas实现保存图片到手机相册 |
h5基于html2canvas实现保存图片到手机相册
|
需求：一个页面进来有多个用户的二维码门票信息，产品需要求底部有个保存图片的按钮，直接将html生成长图进行保存 首先说明：在H5中，无法实现一键保存的功能。只能通过h5自带的长按保存实现 实现思路：首先通过html2canvas通过截图将html转为canvas长图，然后在通过将html2canvas生成的图片信息覆盖在原有的页面上，这样用户在长按的时候其实按住的就是长图了，然后就能保存。 步骤一：安装html2canvas npm install html2canvas or yarn add html2canvas 步骤二：引入html2canvas及使用 import html2canvas from "html2canvas"; //html代码 // 内容区域下面的代码中使用setTimeout是因为在需求中还需要渲染二维码的图片，添加 setTimeout是为了等二维码渲染出来，当然这不是最好的解决办法，后续有更好的解决办法再去修改 // 转成图片 toImage() { let imgHeight = window.document.querySelector("#qrcode").offsetHeight; // 获取DOM高度 let imgWidth = window.document.querySelector("#qrcode").offsetWidth; // 获取DOM宽度 const that = this; return new Promise((resolve, reject) => { setTimeout(() => { // that.$refs.qrcodeBox 是整个要截图区域的根dom节点 // 注意 如果是小程序里面 用的view的节点的话，会报错，得把根节点改成div才行 html2canvas(that.$refs.qrcodeBox, { useCORS: true, allowTaint: true, scale: 4, // 如果截出来的图模糊，可以放大scale width: imgWidth, height: imgHeight, }).then((canvas) => { // 生成的是base64位信息 const dataURL = canvas.toDataURL("image/png"); that.dataURL = dataURL; }); }, 600); }); }, 步骤三:使用生成的图片覆盖在该页面上这时候去手机上长按就已经是截图的内容了，可以长按保存查看效果。 为什么不能一键保存现在已经完成了功能需求，现在说说踩坑之路和为什么 a、一开始我是通过创建a标签去下载，在浏览器里面能下载，不过不是下载到手机相册，而且下载到浏览器的文件中。所以pass b、后面引入了微信的js-sdk，并且查看js-sdk api文档，这里面提供的下载方式也是非常的无语，只能先使用uploadImage上传，才能使用下载。。。你猜我为什么要下载图片。
而且引入的wx非微信小程序的wx，因此也不可以通过wx.downloadFile去下载。搜索原因如下，和同事讨论应该是微信浏览器的内核修改了。
所以只能通过长按保存啦。 |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |