小程序 超长页面截图保存web-view+html2canvas1、html2Canvas2、web-view

1
2
3
4
5
6
<!-- 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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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");
  }
})

1
2
3
4
5
<!-- 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'})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<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)
      }
    })
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!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>