1. 程式人生 > >app內區域截圖利用html2Canvals保存到手機 截屏 (html2Canvals2版本1.0.0)

app內區域截圖利用html2Canvals保存到手機 截屏 (html2Canvals2版本1.0.0)

false wim UNC ict led gallery containe pan mage

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)