app内区域截图利用html2Canvals保存到手机 截屏 (html2Canvals2版本1.0.0)

html2canvas($("#pop_predict_img_container")[0], {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;

还有一点要说明下,再使用微信的头像的时候生成的图片老是会把头像丢失,其他服务器的图片都可以,尼玛就是想不通,后来就先转成base64放到img标签里面生成图片,就解决了这个问题;

此外,说个canvas将img转base64的问题,如下:

 function getBase64Image(imgurl) {
     var img = new Image();
     img.src = imgurl;
     img.setAttribute(crossOrigin, anonymous);
     img.onload=function(){
          var canvas = document.createElement("canvas");
          canvas.width = 300;//这个设置不能丢,否者会成为canvas默认的300*150的大小
          canvas.height = 300;//这个设置不能丢,否者会成为canvas默认的300*150的大小
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, 300, 300);
        var dataURL = canvas.toDataURL("image/png"); 
        console.log(dataURL)
        $("#img").attr("src",dataURL);
        html2img();
     }
}

也是为了解决canvas转base64图片大小不对的问题!

 

H5+  保存图片到手机相册

// 保存图片到相册中 
        function savePicture() {
            var b = new plus.nativeObj.Bitmap(bitblmap);
            b.loadBase64Data(dataUrl, function () {
//                保存到手机的文件名
                fileName = "untitled.png";
                /*这里一定要是_doc目录*/
                b.save("_doc/" + fileName, {overwrite: true}, function (object) {
                    //保存到相册
                    plus.gallery.save("_doc/" + fileName, function () {
                        mui.toast("图片已保存到相册");
                    }, function () {
                        mui.toast("图片保存失败");
                    });
                }, function () {
                    mui.toast("图片保存失败");
                });
            }, function () {
                mui.toast("图片保存失败");
            });
        }

 

app内区域截图利用html2Canvals保存到手机 截屏 (html2Canvals2版本1.0.0)

上一篇:Mac下搭建python3.6+appium


下一篇:移动端使用绝对定位来模拟固定定位