app内区域截图利用html2Canvals保存到手机

app内区域截图利用html2Canvals保存到手机

app内有时候需要区域内的截图保存dom为图像,我们可以使用html2Canvas将dom转换成base64图像字符串,然后再利用5+api保存至app
，通用代码如下：

function saveDomImage (html2Canvas, dom, fileName) {  //使用之前要引入 html2Canvas.js  
        if(mui.os.plus){  
            if (typeof html2Canvas == null)  
                throw Error("html2Canvas is not defined");  
            if (dom == null)  
                throw Error("saveDomImage param : dom is null");  
            if (fileName == null || fileName == "")  
                fileName = "untitled.png";  

            var getPixelRatio = function(context) {  
                var backingStore = context.backingStorePixelRatio ||  
                    context.webkitBackingStorePixelRatio || 1;  
                return (window.devicePixelRatio || 1) / backingStore;  
            };  

            var _canvas = document.createElement('canvas');  

            var ctx = _canvas.getContext('2d');  
            var ratio = getPixelRatio(ctx);  
            ctx.scale(ratio,ratio);  

            var w = dom.offsetWidth;  
            var h = dom.offsetHeight;  

            _canvas.width = w;  
            _canvas.height = h;  
            _canvas.style.width = w *　ratio + 'px';  
            _canvas.style.height = h　*　ratio + "px";  

            html2Canvas(dom, {  
                allowTaint:true,  
                logging: false,  
                profile: true,  
                useCROS: true,  
                canvas : _canvas,  
                onrendered: function (canvas) {  
                    var dataUrl = canvas.toDataURL();  
                    var b = new plus.nativeObj.Bitmap('bitblmap');  

                    b.loadBase64Data(dataUrl, function () {  
                        /*这里一定要是_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("图片保存失败");  
                    });  
                }  
            });  
        }  
    }

至于为什么要是_doc目录,本人未查实原因，hbuilder测试包可以用 _www ，但是打出来的正式包只能用 _doc。
有好心人知晓请告诉本人。

这里html2Canvas使用版本是：0.5.0-beta3。

说明：
1 ，dom元素最好是文档流定位的，用absolute 和 fixed 截取出来的有偏移, 如果想解决这个问题,可以把这个dom复制到新的无偏移(top:0 ;left:0)的dom里面，再对新dom执行保存操作。
2，保存的图片肯定是没有原图清晰的,勉强也能接受，如果图上有二维码识别, 尽量把二维码做的识别度高点。
3，本功能适合保存dom合成的图片。屏幕全截屏，保存远端img图片，mui提供更简单的方式， 请参考其他文档。

html2Canvas: http://html2canvas.hertzen.com