小程序 超长页面截图保存web-view+html2canvas

article/2025/7/21 10:28:22

        web-view文档建议参考----支付宝提供的文档，html2canvas官方文档（官网可以下载html2canvas.js 和 html2canvas.min.js）。由于篇幅受限，这里就贴了一下用法，对于web-view的配置情况，需要自己去查看文档（其实把后台接口域名、要下载图片的域名配置就差不多了），实在不懂的可以看文章最末尾贴的链接。

1、html2Canvas

         我这里使用的是 html2Canvas0.4.0，由于项目着急，也没去使用别的版本。由于代码放不下，另外开了一篇博客、

https://www.cnblogs.com/wenfangcao/p/8763323.htmlhttps://www.cnblogs.com/wenfangcao/p/8763323.html

HTML 使用html2Canvas0.4.0截取页面内容并转换成图片_Start2019的博客-CSDN博客点击按钮，将指定页面内容生成 base64图片，并将图片地址插入到指定DOM元素中https://blog.csdn.net/Start2019/article/details/128564071

2、web-view

2.1 限制：【小程序-web-view组件 - 简书】

  1. web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。简单来说，这个组件是一个和当前页面一样大小的容器，容器里显示的是属性src引用的url的内容。类似于html中的iframe框架。不同的是iframe可以自定义大小边框等样式，webview自动铺满整个小程序页面，覆盖本页面的其他所有标签。

  2. 对个人类型和海外类型的小程序暂不支持。

  3. 域名必须为https协议且经过ICP备案，配置域名时，并不是随便一个备案过的https就可以的，需要从配置后台下载校验文件放在域名根目录下，验证通过后才能配置成功。

  4. 一个小程序最多可添加20个域名，一年可修改50次。

  5. 基础裤1.6.4以上版本支持这个组件，低版本需做兼容

  6. 本地调试时（此时 AppID 可以使用测试号，但是上线或者发布体验需要上述条件），需要勾选 “不校验合法域名、web-view（业务域名）、TLS版本及HTTPS证书”，否则无法打开。

    1. ​

2.2 web-view 4个属性的使用场景：

​

使用方法（分为 web-view 和 H5 连接时不传参和传参两种情况）：

<!-- 1、简单使用方法 -->
<web-view src="https://www.baidu.com/"></web-view>
<!-- 2/4个属性的使用方法 -->
<web-view  bindmessage="msgSuccess" bindload="pageSuccess" binderror="pageError" src="https://www.baidu.com/"></web-view>
<!-- 3、wx:if的使用方法，此方法可以给 H5页面 动态传参 -->
<web-view bindmessage="msgSuccess" bindload="pageSuccess" binderror="pageError" src="{{webUrl}}" wx:if="{{webViewShow}}"></web-view>
Page({ data:{webViewShow: false,webUrl: "https://www.baidu.com/",}, //H5页面加载完成pageSuccess(res){ console.log("网页加载成功", res); },//网页加载失败pageError(err){ console.log("网页加载失败", err) },//小程序后退、组件销毁、分享时收到消息msgSuccess(e){ console.log("网页向小程序发送消息,", e); },onLoad(){console.log("onLoad")this.setData({webViewShow:true, webUrl: webUrl+"?参数=参数值"}); //拼接参数},onReady(){console.log("onReady")},onShow(){console.log("onShow");}
})

参考：微信小程序web-view页面安卓下显示空白的解决办法!!! - 李文杨 - 博客园 

https://www.cnblogs.com/dashucoding/p/10095687.html 

2.3 H5 连接 小程序 

小程序-web-view组件 - 简书

1. 使用的 JSSDK 文件

        上述方法是小程序通过 web-view 连接/跳转到 H5 页面，有时候我们还需要在 H5 页面中含有小程序的功能，小程序提供了 webview 网页中使用的 JSSDK 文件，引用方式如下：

<!-- html -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>// javascript
wx.miniProgram.navigateTo({url: '/path/to/page'})

        引入 SDK 后可以调用小程序 JSSDK 提供的接口，虽然不如小程序原生接口丰富，也能获取到设备网络状态、地理位置等信息，另外还提供了微信扫一扫、摇一摇、长按识别、拍照等接口。截止当前版本，小程序基本不能获取网页的数据，只有在用户分享的时候，可以从返回的参数中获取web-view组件当前显示的页面路径。

2. JSSDK 中支持的接口

微信小程序的坑之wx.miniProgram.postMessage_weixin_33858249的博客-CSDN博客

​

wx.miniProgram.postMessage 接收收据的待定时机

web-view中postMessage接收的“特定时机”意义是什么？ | 微信开放社区

​

3. 具体使用过程

         因为这个功能是第一次开发小程序的时候写的，现在来整理文档，回头再来看，使用过几次 JS-SDK，才知道很多功能在 H5 页面中（要在微信浏览器的环境下）就能实现，具体使用步骤可以参考：【微信调用公众号扫一扫功能】。

        但是在这里，误打误撞做法还算正确：JSDK 暴露出来的 downloadImage 方法下载可能存在问题，最终还是需要回到小程序使用 wx.saveImageToPhotosAlbum 功能去保存图片【后面会解释】。这里把两种实现方式都贴出来，下次遇到类似功能两种方法都可以去尝试一下。

（1）在 H5 中使用保存图片的方法【JSDK 概述 | 微信开放文档】

wx.downloadImage： 概述 | 微信开放文档

​

<script>$(document).ready(function(){$.get("调用接口获取签名（验证APID）", function(obj){wx.config({beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: obj.appId, // 必填，公众号的唯一标识timestamp: obj.timestamp, // 必填，生成签名的时间戳    <%= Html.Encode(ViewData["timestamp" ]) %>nonceStr: obj.nonceStr, // 必填，生成签名的随机串signature: obj.signature, // 必填，签名jsApiList: ['checkJsApi','downloadImage', 'getLocalImgData'] // 必填，需要使用的JS接口列表, 这里只需要调用扫一扫}); });wx.ready(function(){wx.checkJsApi({  //判断当前客户端版本是否支持指定JS接口jsApiList: ['downloadImage'],success: function (res) {// 以键值对的形式返回，可用true，不可用false。如：{"checkResult":{"scanQRCode":true},"errMsg":"checkJsApi:ok"}if(res.checkResult.downloadImage != true){alert('抱歉，当前客户端版本不支持扫一扫');}},fail: function (res) { //检测getNetworkType该功能失败时处理alert('checkJsApi error');}});}); wx.error(function(res){alert("错误信息:"+JSON.stringify(res));}); });$(".btn").on("click",function(){html2canvas( shareContent,{onrendered: function(canvas){var img = new Image();img.src = canvas.toDataURL(); //生成base64图片document.getElementById("photo").appendChild(img);　    base64Canvas = canvas.toDataURL();wx.downloadImage({serverId: '', // 需要下载的图片的服务器端ID，由 uploadImage 接口获得isShowProgressTips: 1, // 默认为1，显示进度提示success: function (res) {var localId = res.localId; // 返回图片下载后的本地ID}});}})})  
</script>

        从注释中可以看到 wx.downloadImage 的 serverId 的参数值，需要由 uploadImage 接口（即上传图片接口）获得下载图片的服务器端ID，而 wx.uploadImage 的参数值，需要由 chooseImage 接口（即拍照或从手机相册中选图接口）获得上传的图片的本地 ID。

        通过上述一系列操作，我的理解是 wx.downloadImage 下载图片接口对应的功能是H5页面调起手机拍照并保存照片，若想下载网络图片，或者base64图片、后台传的图片，还是需要回到小程序中，使用小程序的 wx.saveImageToPhotosAlbum 这一API去保存图片。这或许也是在 H5 页面中使用 wx.downloadImage 出现问题的原因。

        问题：

  1. wx.downloadImage() | 微信开放社区
  2. 小程序内嵌h5页面,wx.downloadImage一直处于下载中怎么解决? | 微信开放社区

        

（2）保存到相册的方法返回到小程序（不需要签名）：

思路图：

  1. 我在这里给了一个参数state，规定从上一个页面跳转到web-veiew页面时，web-view给H5页面传参为state=0；在H5 页面点击按钮（虽然是在微信小程序的环境中，但是这个按钮是属于H5页面的，这里是H5页面的操作，要牢记这一点，不要搞混）后，截图上传给后台，并跳转到小程序，此时在小程序的onload中可以区分。

  2. wx.saveImageToPhotosAlbum 保存图片到本地不支持网络路径，可以是临时文件路径或永久文件路径 (本地路径)，wx.getImageInfo 可以获取网络图片的本地路径。

  3. 保存图片到本地需要用户授权【https://blog.csdn.net/Start2019/article/details/126497581】。

小程序的 .wxml 和.js

<web-view src="{{webUrl}}" wx:if="{{webViewShow}}"></web-view>
Page({ data:{webViewShow: false,webUrl: "测试可以填开启本地服务的h5页面路径",options: {}}, onLoad(options){console.log("onLoad", options);var that = this;if(options.state == 0){// 小程序跳转到H5页面that.setData({webViewShow: true,webUrl: that.data.webUrl + "?state=0"})} else if(options.state == 1){ // H5页面跳转小程序     that.setData({webViewShow: true,webUrl: that.data.webUrl + "?state=1"});that.getImages();}},// 获取后台传的网络图片getImages(){var that = this;wx.showLoading();request.post("接口地址", {参数}).then(res=>{wx.hideLoading();that.getLocalImg(res.imgSrc); //获取网络图片的本地路径，并保存图片到手机})},// 获取网络图片的本地路径，并保存图片到手机getLocalImg(url){wx.getImageInfo({src: url,success: function(succ){wx.saveImageToPhotosAlbum({filePath: succ.path,success(res) { wx.showToast({title: '图片保存成功'})}})},fail: function(e){console.log("获取图片本地路径失败",e)}})}
})

h5页面：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML 5界面</title><script src="./js/jweixin.js"></script><script src="./js/jquery.min.js"></script><script src="./js/html2canvas041.js"></script><style>html,body,div,p{margin:0;padding:0;}.box{width: 100%;height: 10rem;}#red{background-color: red;}#orange{background-color: orange;}#yellow{background-color: yellow;}#green{background-color: green;}#palegreen{background-color: palegreen;}#blue{background-color: blue;}#purple{background-color: purple;}</style>
</head>
<body><button id="btns">下载图片</button><div id="htmlcanvas"><div class="box" id="red"></div><div class="box" id="orange"></div><div class="box" id="yellow"></div><div class="box" id="green"></div><div class="box" id="palegreen"></div><div class="box" id="blue"></div><div class="box" id="purple"></div></div><div id="photo" style="display: none;"></div>
</body>
</html>
<script src="../js/common.js"></script>
<script>$("#btns").on("click", function(){var htmlcanvas = document.getElementById("htmlcanvas");html2canvas(htmlcanvas,{onrendered: function(canvas){var img = new Image();img.src = canvas.toDataURL(); //生成base64图片document.getElementById("photo").appendChild(img);　    base64Canvas = canvas.toDataURL();// ---- 获取到这个路径之后，可以把base64图片上传给后台，让后台保存到服务器上给一个网络图片地址，// -----然后就可以跳转到小程序，使用小程序的API下载该网路图片，实现点击按钮截取页面长图的功能// ...图片上传给后台成功之后的操作，用延时器代替setTimeout(function(){wx.miniProgram.getEnv(function (res) { if (res.miniprogram) { //如果当前是小程序环境,把参数传给小程序 wx.miniProgram.redirectTo({url: "/pages/common/attached/attached?state=1" //这一步是携带参数转到小程序。id从location.href中获取})}})},1000);    }})});  
</script>

其他：

微信小程序把base64的图片保存到手机相册_a_靖的博客-CSDN博客

html5页面嵌入到微信小程序 - lingmin210 - 博客园


http://chatgpt.dhexx.cn/article/4lJAgTLO.shtml

相关文章

服务端实现对页面截图 - PhantomJs

服务端实现对页面截图 - PhantomJs

版权声明 : 本文为博主原创文章,如需转载,请注明出处(https://blog.csdn.net/F1004145107/article/details/97786555) 目录 / 1 / 前言 / 2 / 使用方式 / 3 / 结语 / 1 / 前言 本文主要讲解的是关于在Java服务端使用PhandomJs来实现对指定页面(页面可包含echarts等图表)进…
阅读更多...
js保存当前页面的截图 (leaflet下载当前页面截图，线会偏移问题解决)

js保存当前页面的截图 (leaflet下载当前页面截图，线会偏移问题解决)

这是保存的leaflet地图 上代码: html <div id="map" class="map"></div>ts代码： var mapid = document.querySelector(#map);const scale = window.devicePixelRatio;// // 传入节点原始宽高const _width = mapid["offsetWidth"]…
阅读更多...
react单个页面截图和多个页面截图

react单个页面截图和多个页面截图

之前有一个需求是点击导出按钮&#xff0c;然后去各个页面截图&#xff0c;将图片传给后端&#xff0c;后端返回文件流&#xff0c;导出ppt报告。这个需求听到的时候头都大了&#xff0c;不知道怎么做&#xff0c;之后有思路了&#xff0c;在实现过程中也出现了各种问题&#x…
阅读更多...
JS页面截图

JS页面截图

1、引入 js 【密码&#xff1a;gf33】 点击下载 html2canvas.min.js <script src"{url:static/octzz/js/html2canvas.min.js}"></script>2、html代码 <body><div><button type"button" class"layui-btn" onclick&q…
阅读更多...
使用html2canvas.js实现页面截图

使用html2canvas.js实现页面截图

由于最近项目需求&#xff0c;需要实现html页面截图&#xff0c;经过查资料&#xff0c;找到了这个东东html2canvas&#xff0c;刚开始截出来的图片&#xff0c;空白、模糊、图片不完整&#xff0c;各种问题&#xff0c;但幸好有各路大神的见解&#xff0c;把问题解决了&#x…
阅读更多...
vue页面截图；H5页面截图；vue项目中将特定网页内容生成图片(截图)；html2canvas截图

vue页面截图；H5页面截图；vue项目中将特定网页内容生成图片(截图)；html2canvas截图

功能&#xff1a; 1.兼容 PC 和 Mobile&#xff1b; 2.对指定的区域进行截取&#xff1b; 3.可以控制截图大小&#xff1b; 4.截图生成base64图片地址 一、安装插件 npm install html2canvas --save 或 yarn add html2canvas二、在.vue页面引入使用 import html2canvas fro…
阅读更多...
Java实现HTML页面截图功能

Java实现HTML页面截图功能

概述 业务开发中&#xff0c;经常会有HTML页面截图&#xff0c;或打印另存为PDF文件的需求。本文即是HTML页面截图需求的技术调研过程的成文。不想看长篇大论的同学&#xff0c;可以直接看Selenium部分&#xff0c;本人最后也是采取此方案。 html2canvas 直接上代码&#xf…
阅读更多...
2种方式！带你快速实现前端截图

2种方式！带你快速实现前端截图

导语 | 本文将介绍在前端开发中页面截图的两种方式&#xff0c;包括对其实现原理和使用方式进行详细阐述&#xff0c;希望能为更多前端开发者提供一些经验和帮助。 一、 背景 页面截图功能在前端开发中&#xff0c;特别是营销场景相关的需求中, 是比较常见的。比如截屏分享&…
阅读更多...
Element el-row el-col 布局组件详解

Element el-row el-col 布局组件详解

点此查看全部文字教程、视频教程、源代码 本文目录 1. 背景2. 分栏布局3. 分栏间隔4. 分栏偏移4. 对齐方式5. 响应式布局6. 小结 1. 背景 element的布局方式与bootstrap原理是一样的&#xff0c;将网页划分成若干行&#xff0c;然后每行等分为若干列&#xff0c;基于这样的方式…
阅读更多...
Android基础篇 屏幕横竖屏切换（layout-land）下篇

Android基础篇 屏幕横竖屏切换（layout-land）下篇

默认情况下Activity进行屏幕旋转会自动进行onDestroy并重新onCreate 一、非默认情况下 在AndroidManifest.xml的Activity中配置 <activityandroid:name".ui.activity.XXXXXActivity"android:launchMode"singleTask"android:screenOrientation"por…
阅读更多...
Android屏幕共享解决方案

Android屏幕共享解决方案

屏幕共享是增强互动体验&#xff0c;提高沟通效率的重要功能。以下是一些实现Android屏幕共享的解决方案&#xff1a; 1、使用视频通话功能&#xff1a;在Android中&#xff0c;可以使用视频通话功能实现屏幕共享。通过视频通话&#xff0c;可以将自己的屏幕内容以视频的方式分…
阅读更多...
让div居中的方式的几种方法

让div居中的方式的几种方法

让div水平居中的方式的几种方法。 文章目录 一、margin二、绝对定位三、子元素绝对定位父元素相对定位四、flex布局总结 一、margin 第一种方式我们可以利用外边距属性来使div水平垂直居中 先来看一段有问题的代码 <!DOCTYPE html> <html lang"en"> &…
阅读更多...
html网页图片和文字水平居中垂直居中显示

html网页图片和文字水平居中垂直居中显示

关注公众号&#xff1a;”奇叔码技术“ 回复&#xff1a;“java面试题大全”或者“java面试题” 即可免费领取资料 下面代码一致&#xff1a;示例 自己做的网站效果示例 div相对于页面水平居中显示&#xff1a; 核心代码&#xff1a;margin&#xff1a;0 auto&#xff1b;…
阅读更多...
Android 双屏异显(Presentation) 开发，将第二个页面投屏到副屏上

Android 双屏异显(Presentation) 开发，将第二个页面投屏到副屏上

1. 背景 最近开发的一个项目&#xff0c;有两个屏幕&#xff0c;需要将第二个页面投屏到副屏上&#xff0c; 这就需要用到Android的双屏异显(Presentation)技术了&#xff0c;研究了一下&#xff0c;这里做下笔记。 我们那个副屏是一块汽车的后视镜(流媒体后视镜)&#xff0c;…
阅读更多...
父子div元素水平垂直居中的七种方法

父子div元素水平垂直居中的七种方法

效果样式图如下: 方法一:利用定位和transform的方法来进行居中 说明&#xff1a;首先利用定位中的子元素绝对定位和父元素相对定位的方法来,top:50% 和left:50%会使子元素在父元素中向下移动250px,向右移动250px,子元素因自身有高度和宽度,这会导致子元素不能完全居中的情况,t…
阅读更多...
用户体验思考与flex三坑：元素不均分、溢出不省略和垂直不滚动

用户体验思考与flex三坑：元素不均分、溢出不省略和垂直不滚动

flex已经越来越成为前端不可避免的话题。曾经为了搞清flex的原理偶然画了一张图。但后来发现只是冰山一角。 在某些你想实现的交互效果中使用flex后可能会发现并不起作用。通过我的实践&#xff0c;大致有三个问题&#xff1a;子元素不平分父元素空间、对文字设置了溢出省略却…
阅读更多...
DIV居中的经典方法

DIV居中的经典方法

参考&#xff1a;https://www.cnblogs.com/rubykakas/articles/7992662.html 1. 实现DIV水平居中 设置DIV的宽高&#xff0c;使用margin设置边距0 auto&#xff0c;CSS自动算出左右边距&#xff0c;使得DIV居中。 div{width: 100px;height: 100px;margin: 0 auto; } 缺点&…
阅读更多...
局域网屏幕共享_给安卓手机连一个大屏幕——多端协作（六）

局域网屏幕共享_给安卓手机连一个大屏幕——多端协作（六）

好久不见，时下情势严峻，我们这儿封村了，生活变得更加不方便了。本来在网上买了肉，等到终于发货送到县城，我却不能进城去取了…… 希望顺丰营业点有冰箱，我的肉不会坏掉 今天给大家介绍的是Android系统的无线投屏功能，简单来说就是将支持的设备作为安卓手机的外接屏幕，以…
阅读更多...
安卓手机与蓝牙模块联合调试（二）—— 单片机蓝牙控制LED灯亮灭（上）

安卓手机与蓝牙模块联合调试（二）—— 单片机蓝牙控制LED灯亮灭（上）

系列博文&#xff1a; &#xff08;1&#xff09;安卓手机与蓝牙模块联合调试&#xff08;一&#xff09;——蓝牙模块的串口通讯 &#xff08;2&#xff09;安卓手机与蓝牙模块联合调试&#xff08;二&#xff09;—— 单片机蓝牙控制LED灯亮灭&#xff08;上&#xff09; …
阅读更多...
android 多屏幕显示activity，副屏，无线投屏

android 多屏幕显示activity，副屏，无线投屏

目录 1. 首先&#xff0c;需要一个副屏 1. 1 可以通过代码的形式自己创建VirtualDispaly ,创建副屏。 1.2 或者&#xff0c;在手机的开发者模式中直接开启模拟副屏&#xff0c;也是可以的。 2.0 怎么利用这个副屏幕&#xff1f; 2.1 用作 presentation 演示ppt&#xff1…
阅读更多...
推荐文章

Copyright @ 2022~2023