app內區域截圖利用html2Canvals保存到手機 截屏 (html2Canvals2版本1.0.0)
阿新 • • 發佈:2018-09-12
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)