微信公众号H5合成图片长按下载

h5不能通过微信调用下载方法，a标签也不支持，所以通过微信本身的长按弹出下载，但是在有些应用时我们是希望将页面合成一张图，然后进行下载，本人摸坑许久，实现如下

需要合成的dom节点

合成图片后赋值链接的img

合成图片插件 html2canvas

import html2canvas from 'html2canvas';

进入页面时执行合成函数creatImg

creatImg() {const $this = this;this.imgH=document.getElementById("main_content").offsetHeight;const dom = document.querySelector("#main_content");const box = window.getComputedStyle(dom);// DOM 节点计算后宽高const width = this.parseValue(box.width);const height = this.parseValue(box.height);// 获取像素比const scaleBy = this.DPR();// 创建自定义 canvas 元素var canvas = document.createElement('canvas');// 设定 canvas 元素属性宽高为 DOM 节点宽高 * 像素比canvas.width = width * scaleBy;canvas.height = height * scaleBy;// 设定 canvas css宽高为 DOM 节点宽高canvas.style.width = `${width}px`;canvas.style.height = `${height}px`;               let x = width;let y = height;html2canvas(dom, {canvas,dpi: 350,}).then(function () {$this.testUrl=canvas.toDataURL("image/png"); //生成的图片链接uni.hideLoading();})},parseValue(value) {return parseInt(value, 10);},DPR() {if (window.devicePixelRatio && window.devicePixelRatio > 1) {return window.devicePixelRatio;}return 1;}

图片的生成略带一点点模糊，我是没招了

图片的放置

微信的长按操作是当前元素，那么我们要使得长按的是生成的图片，这样才能保住下载时下载的是目标图片，有两种方法

1 图片生成完成后隐藏 main_content 只显示合成的图片

2 通过定位将目标image 的层级放置在main_content 之上，这样长按按到的对象就是image，就能愉快的保存了

    position: absolute; top: 0;opacity: 0;z-index: 999;

微信公众号H5合成图片长按下载相关推荐

微信公众号H5开发，在微信浏览器打开H5，无法一键下载图片
微信公众号H5开发,在微信浏览器打开H5,无法一键下载图片背景解决方案文章参考背景微信公众号H5开发,在普通浏览器,可以直接通过以下代码下载图片: let a = document.crea ...
微信公众号H5点击图片预览(可放大缩小)，用微信内置jssdk实现
在微信公众号H5里面可能会遇到点击图片预览,还可以放大缩小,微信内置有这个功能可以实现用vue写项目的话,先 cnpm install weixin-js-sdk --save 接着给图片一个点击事 ...
vue+webpack打包发布到线上后微信公众号H5部分打开白屏,刷新又好了
vue+webpack打包发布到线上后微信公众号H5部分打开白屏,刷新又好了 1.问题 2.原因这次可能的原因 3.过渡方案 4.解决方案 4.1 配置nginx服务器 4.2 前端打包保留两个版本 ...
微信公众号如何上传长图
微信公众号如何上传长图?我们先要了解为什么要做长图,有哪些难题,最后再来解决如何上传长图. 为什么要做长图? 回顾整个2019年,条漫当道,肉眼可见的,大号们都奔着条漫去了.他们大多看上去好像只用了一 ...
微信公众号获取的图片不能正常显示的问题
目前已经获取微信公众号发布的图片,但不能正常显示提示:此图片来自微信公众平台未经允许不得引用查看了一下他的地址是这样的:(http://mmbiz.qpic.cn/mmbiz/qqz4WKmib ...
php h5微信公众号支付接口,微信公众号H5支付接口调用方法
本文实例为大家分享了微信内h5调用支付接口的具体代码,供大家参考,具体内容如下官方文档微信公众号h5接口调用 // 判断微信版本是否在5.0以上 // window.navigator.user ...
微信小程序webview清除缓存、微信公众号h5清除缓存、页面白屏、空白、不刷新问题
一.缓存带来的问题和原因我们在发布新版本的时候,在打开微信小程序webview嵌套的h5页面或微信公众号h5页面时,常常会发现页面还是上个版本的旧页面或者打开直接空白白屏了,那么为什么会存在这个问 ...
php微信公众号开发图片预览,微信公众号点亮图片怎么做
微信公众号点亮图片怎么做? 微信公众号点亮图片的方法: 下面就为大家带来解答,只需要简单三步哦. 1.准备好两张图片,一张黑白,一张彩色的,在主编编辑器中,按图中所示,找到需要的样式,点击样式,进入编 ...
uniapp 开发微信公众号H5 隐藏右上角扩展按钮
uniapp 开发微信公众号H5 隐藏右上角扩展按钮 1.首先使用npm安装一下微信的jsApi (这个应该都会吧就跟vue使用npm安装依赖一样) 初始化: npm init -y 安装微信模块: ...
【微信公众号H5授权登录】
微信公众号H5授权登录废话不多,直接上代码(这里只写代码的实现) 废话不多,直接上代码(这里只写代码的实现) 页面进来判断微信环境 onShow() {//设置初始值为false,微信环境下才能打开 ...

微信公众号H5合成图片长按下载

需要合成的dom节点

合成图片后赋值链接的img

合成图片插件 html2canvas

进入页面时执行合成函数creatImg

图片的放置

微信公众号H5合成图片长按下载相关推荐

最新文章

热门文章

微信公众号H5合成图片长按下载

需要合成的dom节点

合成图片后赋值链接的img

合成图片插件 html2canvas

进入页面时 执行合成函数creatImg

图片的放置

微信公众号H5合成图片长按下载相关推荐

最新文章

热门文章

进入页面时执行合成函数creatImg