小程序开发遇到的问题

2018-08-17

截取图片

1
2
3
4
5
6
7
8
9
10 <img src="img/1.jpg"/>
      <input class="example1" type="button" value="button">
      生成界面如下：
      <img src="" id="predict_img" class="hide"/>
  </body>
  <style type="text/css">
  	.hide{
  		display: none;
  	}
  </style>

最近做h5网页，有个功能是用户能长按页面保存为图片，在我们理解就是网页要生成图片然后再让用户长按保存，然后就发现了html2canvas这个框架了，效果挺不错了，但是有几个坑说一下（用的最新版）：

1
2
3
4
5
6
7
8
9 $(document).ready( function(){
             $(".example1").on("click", function(event) {
             
                 html2canvas(document.body, {scale:2,logging:false,useCORS:true}).then(function(canvas) {
            var dataUrl = canvas.toDataURL();
            $("#predict_img").attr("src",dataUrl).removeClass("hide");
        });
             }); 
     });

scale：是用来调整生成图片屏幕分辨率的，其实设置成1再iphone上生成的图片清晰度没啥问题，但是再有些android手机上就很模糊，所以为了兼顾这部分手机就把scale设置成了2;

useCROS：这个参数是用来设置是否允许使用跨域的图片进行访问的，好像默认就是true，不太记得了；

logging：这个是日志打印的，实际上线当然不需要了，所以就false；

在同一个服务器下是正常的，访问其他服务器的图片时，截图是空白的，由于获取其他服务器上的图片需要跨域

1
2
3
4
5
6
7
8
9
10 <img src="http://cms-bucket.nosdn.127.net/2018/08/15/a250fd001743481e860944c03910ec7b.jpeg" id="img"/>
      <input class="example1" type="button" value="button">
      生成界面如下：
      <img src="" id="predict_img" class="hide"/>
  </body>
  <style type="text/css">
  	.hide{
  		display: none;
  	}
  </style>

js
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     $(document).ready( function(){
              $(".example1").on("click", function(event) {
              
                  html2canvas(document.body, {scale:2,logging:false,useCORS:true}).then(function(canvas) {
	            var dataUrl = canvas.toDataURL();
	            $("#predict_img").attr("src",dataUrl).removeClass("hide");
	        });
              }); 
      });
       var img = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg";
function getBase64Image(img) {
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
 
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0, img.width, img.height);
  var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
  var dataURL = canvas.toDataURL("image/"+ext);
  return dataURL;
}
var image = new Image();
image.crossOrigin = '';
image.src = img;
image.onload = function(){
  var base64 = getBase64Image(image);
  console.log(base64);
  $("#img").attr("src",base64);
}

下载html2canvas

感谢niklasvh提供 html2canvas