app内区域截图利用html2Canvals保存到手机 截屏 (html2Canvas使用版本是：0.5.0-beta3。)

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 || ;
                return (window.devicePixelRatio || ) / 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