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

        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

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.  
   <!-- 1、简单使用方法 -->
2.  
   <web-view src="https://www.百度.com/"></web-view>
3.  
   <!-- 2/4个属性的使用方法 -->
4.  
   <web-view bindmessage="msgSuccess" bindload="pageSuccess" binderror="pageError" src="https://www.百度.com/"></web-view>
5.  
   <!-- 3、wx:if的使用方法，此方法可以给 H5页面 动态传参 -->
6.  
   <web-view bindmessage="msgSuccess" bindload="pageSuccess" binderror="pageError" src="{{webUrl}}" wx:if="{{webViewShow}}"></web-view>

1.  
   Page({
2.  
   data:{
3.  
   webViewShow: false,
4.  
   webUrl: "https://www.百度.com/",
5.  
   },
6.  
   //H5页面加载完成
7.  
   pageSuccess(res){ console.log("网页加载成功", res); },
8.  
   //网页加载失败
9.  
   pageError(err){ console.log("网页加载失败", err) },
10.  
    //小程序后退、组件销毁、分享时收到消息
11.  
    msgSuccess(e){ console.log("网页向小程序发送消息,", e); },
12.  
    onLoad(){
13.  
    console.log("onLoad")
14.  
    this.setData({webViewShow:true, webUrl: webUrl "?参数=参数值"}); //拼接参数
15.  
    },
16.  
    onReady(){
17.  
    console.log("onReady")
18.  
    },
19.  
    onShow(){
20.  
    console.log("onShow");
21.  
    }
22.  
    })

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

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

2.3 H5 连接 小程序 

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

1. 使用的 JSSDK 文件

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

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

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

2. JSSDK 中支持的接口

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

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

3. 具体使用过程

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

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

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

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

1.  
   <script>
2.  
   $(document).ready(function(){
3.  
   $.get("调用接口获取签名（验证APID）", function(obj){
4.  
   wx.config({
5.  
   beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
6.  
   debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
7.  
   appId: obj.appId, // 必填，公众号的唯一标识
8.  
   timestamp: obj.timestamp, // 必填，生成签名的时间戳 <%= Html.Encode(ViewData["timestamp" ]) %>
9.  
   nonceStr: obj.nonceStr, // 必填，生成签名的随机串
10.  
    signature: obj.signature, // 必填，签名
11.  
    jsApiList: ['checkJsApi','downloadImage', 'getLocalImgData'] // 必填，需要使用的JS接口列表, 这里只需要调用扫一扫
12.  
    });
13.  
    });
14.  
     
15.  
    wx.ready(function(){
16.  
    wx.checkJsApi({ //判断当前客户端版本是否支持指定JS接口
17.  
    jsApiList: ['downloadImage'],
18.  
    success: function (res) {// 以键值对的形式返回，可用true，不可用false。如：{"checkResult":{"scanQRCode":true},"errMsg":"checkJsApi:ok"}
19.  
    if(res.checkResult.downloadImage != true){
20.  
    alert('抱歉，当前客户端版本不支持扫一扫');
21.  
    }
22.  
    },
23.  
    fail: function (res) { //检测getNetworkType该功能失败时处理
24.  
    alert('checkJsApi error');
25.  
    }
26.  
    });
27.  
    });
28.  
    wx.error(function(res){
29.  
    alert("错误信息:" JSON.stringify(res));
30.  
    });
31.  
    });
32.  
     
33.  
    $(".btn").on("click",function(){
34.  
    html2canvas( shareContent,{
35.  
    onrendered: function(canvas){
36.  
    var img = new Image();
37.  
    img.src = canvas.toDataURL(); //生成base64图片
38.  
    document.getElementById("photo").appendChild(img);　
39.  
    base64Canvas = canvas.toDataURL();
40.  
     
41.  
    wx.downloadImage({
42.  
    serverId: '', // 需要下载的图片的服务器端ID，由 uploadImage 接口获得
43.  
    isShowProgressTips: 1, // 默认为1，显示进度提示
44.  
    success: function (res) {
45.  
    var localId = res.localId; // 返回图片下载后的本地ID
46.  
    }
47.  
    });
48.  
    }
49.  
    })
50.  
    })
51.  
    </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

1.  
   <web-view src="{{webUrl}}" wx:if="{{webViewShow}}"></web-view>
2.  
   Page({
3.  
   data:{
4.  
   webViewShow: false,
5.  
   webUrl: "测试可以填开启本地服务的h5页面路径",
6.  
   options: {}
7.  
   },
8.  
   onLoad(options){
9.  
   console.log("onLoad", options);
10.  
    var that = this;
11.  
    if(options.state == 0){
12.  
    // 小程序跳转到H5页面
13.  
    that.setData({
14.  
    webViewShow: true,
15.  
    webUrl: that.data.webUrl "?state=0"
16.  
    })
17.  
    } else if(options.state == 1){
18.  
    // H5页面跳转小程序
19.  
    that.setData({
20.  
    webViewShow: true,
21.  
    webUrl: that.data.webUrl "?state=1"
22.  
    });
23.  
    that.getImages();
24.  
    }
25.  
    },
26.  
    // 获取后台传的网络图片
27.  
    getImages(){
28.  
    var that = this;
29.  
    wx.showLoading();
30.  
    request.post("接口地址", {参数}).then(res=>{
31.  
    wx.hideLoading();
32.  
    that.getLocalImg(res.imgSrc); //获取网络图片的本地路径，并保存图片到手机
33.  
    })
34.  
    },
35.  
    // 获取网络图片的本地路径，并保存图片到手机
36.  
    getLocalImg(url){
37.  
    wx.getImageInfo({
38.  
    src: url,
39.  
    success: function(succ){
40.  
    wx.saveImageToPhotosAlbum({
41.  
    filePath: succ.path,
42.  
    success(res) {
43.  
    wx.showToast({title: '图片保存成功'})
44.  
    }
45.  
    })
46.  
    },
47.  
    fail: function(e){
48.  
    console.log("获取图片本地路径失败",e)
49.  
    }
50.  
    })
51.  
    }
52.  
    })

h5页面：

1.  
   <!DOCTYPE html>
2.  
   <html lang="en">
3.  
   <head>
4.  
   <meta charset="UTF-8">
5.  
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
6.  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
7.  
   <title>HTML 5界面</title>
8.  
   <script src="./js/jweixin.js"></script>
9.  
   <script src="./js/jquery.min.js"></script>
10.  
    <script src="./js/html2canvas041.js"></script>
11.  
    <style>
12.  
    html,body,div,p{margin:0;padding:0;}
13.  
    .box{width: 100%;height: 10rem;}
14.  
    #red{background-color: red;}
15.  
    #orange{background-color: orange;}
16.  
    #yellow{background-color: yellow;}
17.  
    #green{background-color: green;}
18.  
    #palegreen{background-color: palegreen;}
19.  
    #blue{background-color: blue;}
20.  
    #purple{background-color: purple;}
21.  
    </style>
22.  
    </head>
23.  
    <body>
24.  
    <button id="btns">下载图片</button>
25.  
    <div id="htmlcanvas">
26.  
    <div class="box" id="red"></div>
27.  
    <div class="box" id="orange"></div>
28.  
    <div class="box" id="yellow"></div>
29.  
    <div class="box" id="green"></div>
30.  
    <div class="box" id="palegreen"></div>
31.  
    <div class="box" id="blue"></div>
32.  
    <div class="box" id="purple"></div>
33.  
    </div>
34.  
    <div id="photo" style="display: none;"></div>
35.  
    </body>
36.  
    </html>
37.  
    <script src="../js/common.js"></script>
38.  
    <script>
39.  
    $("#btns").on("click", function(){
40.  
    var htmlcanvas = document.getElementById("htmlcanvas");
41.  
    html2canvas(htmlcanvas,{
42.  
    onrendered: function(canvas){
43.  
    var img = new Image();
44.  
    img.src = canvas.toDataURL(); //生成base64图片
45.  
    document.getElementById("photo").appendChild(img);　
46.  
    base64Canvas = canvas.toDataURL();
47.  
    // ---- 获取到这个路径之后，可以把base64图片上传给后台，让后台保存到服务器上给一个网络图片地址，
48.  
    // -----然后就可以跳转到小程序，使用小程序的API下载该网路图片，实现点击按钮截取页面长图的功能
49.  
    // ...图片上传给后台成功之后的操作，用延时器代替
50.  
    setTimeout(function(){
51.  
    wx.miniProgram.getEnv(function (res) {
52.  
    if (res.miniprogram) { //如果当前是小程序环境,把参数传给小程序
53.  
    wx.miniProgram.redirectTo({
54.  
    url: "/pages/common/attached/attached?state=1" //这一步是携带参数转到小程序。id从location.href中获取
55.  
    })
56.  
    }
57.  
    })
58.  
    },1000);
59.  
    }
60.  
    })
61.  
    });
62.  
    </script>

其他：

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

这篇好文章是转载于：学新通技术网