vue使用html2canvas + opacity透明覆盖，实现长按图片保存本地

最新推荐文章于 2024-08-02 16:57:55 发布

小飞机噗噗噗

最新推荐文章于 2024-08-02 16:57:55 发布

阅读量624

点赞数 8

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_37057426/article/details/136302681

版权

本文介绍了如何在前端生成图片并实现长按保存功能，包括使用html2canvas截取弹框内容，调整透明度以确保长按时能保存图片，同时处理了移动端浏览器的兼容性问题，如iOSSafari的image元素消失问题。

摘要由CSDN通过智能技术生成

先引出问题：在分享的时候，要实现长按保存图片到本地，图片还得是前端自己生成，且包括图片二维码和封面图片文字等。像下面这样的截图保存到本地。

1、首先想到的方法就是在弹框出现的时候就使用html2canvas生成弹框的截图，然后把截图用css方法z-index放到弹框的上方，并且设置截图opacity透明度为0，这样长按弹框的时候，实际上是长按了截图这样就能下载本地了。实现如下图：

2、下面是实现的方法：

（1）在弹框展示的时候第一时间去调用html2canvas截取图片，如下示例代码：

// 获取海报
   getDomToImage() {
     setTimeout(()=> {
      const node = document.getElementById('shareModuleWrap') // 通过id获取dom
       html2canvas(node, {useCORS: true, backgroundColor: null}).then((canvas) => {
              //将canvas转为base64格式
              //输出图片的Base64,dataUrl
              this.shareImgData = canvas.toDataURL("image/png");
          });
        }, 500);
    },

注意点：如果觉的html2canvas截图加载太慢或者卡顿，很可能是页面的元素较多，需要用参数ignoreElements去掉无用元素，详细可查看我之前的文章：解决html2canvas组件生成截图卡顿问题_html2canvas 生成图片慢-CSDN博客

（2）将保存的图片展示到弹框之上，并且设置透明度为0，到此就实现了产品的要求了，打卡下班，下面的示例代码：

<div class="qp_box_img" v-if="shareImgData">
     <img :src="shareImgData" />
</div>

.qp_box_img {
        width: 690px;
        height: 1108px;
        position: absolute;
        top: 0;
        z-index: 999;
        opacity: 0;
        img {
            width: 690px;
            height: 1108px;
        }
}

此处，会发现特意在img外层加了一个div，为啥不能img直接加opacity透明度呢？

因为，这里在手机版谷歌浏览器里会有个坑，image标签的opacity为<0.1的话，image元素直接消失了，导致我们不能长按保存了，因此在外层加了个div（在其他手机浏览器没问题，像苹果的safari，夸克等）