ziqim/zhiqim_ui/src_extend/zhiqim_image_clipper.mobile.js

/*
 * 版权所有 (C) 2015 知启蒙(ZHIQIM) 保留所有权利。
 * 
 * 指定登记&发行网站： https://www.zhiqim.com/ 欢迎加盟知启蒙，[编程有你，知启蒙一路随行]。
 *
 * 本文采用《知启蒙许可证》，除非符合许可证，否则不可使该文件！
 * 1、您可以免费使用、修改、合并、出版发行和分发，再授权软件、软件副本及衍生软件；
 * 2、您用于商业用途时，必须在原作者指定的登记网站进行实名登记；
 * 3、您在使用、修改、合并、出版发行和分发时，必须包含版权声明、许可声明，及保留原作者的著作权、商标和专利等知识产权；
 * 4、您在互联网、移动互联网等大众网络下发行和分发再授权软件、软件副本及衍生软件时，必须在原作者指定的发行网站进行发行和分发；
 * 5、您可以在以下链接获取一个完整的许可证副本。
 * 
 * 许可证链接：http://zhiqim.org/licenses/LICENSE.htm
 *
 * 除非法律需要或书面同意，软件由原始码方式提供，无任何明示或暗示的保证和条件。详见完整许可证的权限和限制。
 */
+(function(Z)
{
//BEGIN

/**
 * mobile 端图片裁切
*/
Z.ImageClipper = Z.Class.newInstance();
Z.ImageClipper.prototype = 
{
    defaults:
    {
        elem : null,
        ratio: 1,
        state : {},
        img: null,
        clipWidth: [50, 100, 150],
        save: null
    },
    
    execute: function()
    {
        this.$elem = Z.$elem(this.elem, "Z.Floater");
        
        if (this.clipWidth == null || this.clipWidth.length == 0)
        {
            Z.alert("[Z.ImageClipper]没有设置clipWidth，或不是数组");
            return;
        }
    
        this.id = Z.random(10);
        
        //判断是不是手机端
        this.width = this.$elem.offsetWidth();
        var html = '<div id="ZImageClipper_'+this.id+'" class="z-relative z-w100p">'
                 + '    <div id="ZImageClipper_image_'+this.id+'" class="z-relative z-w100p z-bd z-overflow-hidden z-bg-white" style="cursor:move;background-repeat:no-repeat;height:'+this.width+'px;">'
                 + '        <div id="ZImageClipper_square_'+this.id+'" class="z-absolute z-w50p z-h50p z-bd" style="top:25%;left:25%;box-shadow:0 0 0 1000px rgba(0, 0, 0, 0.5);"></div>'
                 + '        <div id="ZImageClipper_loading_'+this.id+'" class="z-absolute-center-middle z-w60 z-h30 z-hide">加载中...</div>'
                 + '        <div id="ZImageClipper_clipped_'+this.id+'" class="z-absolute z-w100p z-l0 z-t0 z-text-center z-pd-t20 z-bd z-hide" style="height:'+this.width+'px;"></div>'
                 + '    </div>'
                 + '    <div class="z-button-row z-w100p z-mg-t10">'
                 + '        <button type="button" class="z-button-flex z-h50 zi-rem14" id="ZImageClipper_upload_'+this.id+'">上传图像 </button>'
                 + '        <button type="button" class="z-button-flex z-h50 zi-rem16" id="ZImageClipper_zoomIn_'+this.id+'">+</button>'
                 + '        <button type="button" class="z-button-flex z-h50 zi-rem16" id="ZImageClipper_zoomOut_'+this.id+'">-</button>'
                 + '        <button type="button" class="z-button-flex z-h50 zi-rem14" id="ZImageClipper_save_'+this.id+'">确定</button>'
                 + '    </div>'
                 + '</div>';
                 
        this.$elem.html(html);
        this.$imageBox = this.$elem.find("#ZImageClipper_image_"+this.id);
        this.$square =  this.$elem.find("#ZImageClipper_square_"+this.id);
        this.$loading = this.$elem.find("#ZImageClipper_loading_"+this.id).show();
        this.$$button = this.$elem.find("button");
        
        this.image = new Image();
        Z(this.image).load(function() 
        {
            this.$loading.hide();
            this.setBackground();
            
            this.$imageBox.on("touchstart", this.onTouchStart, this)
                .on("touchmove", this.onTouchMove, this)
                .on("mouseup mouseleave", this.onTouchEnd, this);
        }, this);
        this.image.src = this.img;
    
        Z("#ZImageClipper_zoomIn_"+this.id).on("touchstart", this.onZoomIn, this);
        Z("#ZImageClipper_zoomOut_"+this.id).on("touchstart", this.onZoomOut, this);
    
        this.$file = Z("<input id='ZImageClipper_upload_file_"+this.id+"' type='file' accept='image/jpg,image/jpeg,image/png' class='z-hide' single>");
        this.$file.appendTo("body").change(function()
        {
            var file = this.$file[0].files[0];
            var reader = new FileReader();
            reader.onload = Z.bind(function(e)
            {
                this.img = e.target.result;
                this.image.src = this.img;
            }, this);

            reader.readAsDataURL(file);
        }, this);
        
        Z("#ZImageClipper_upload_"+this.id).on("touchstart",function(){this.$file[0].click();}, this);
                
        if (Z.T.isFunction(this.save)){
            Z("#ZImageClipper_save_"+this.id).on("touchstart", this.save, this);
        }
    },
    
    setBackground: function()
    {
        var w =  parseInt(this.image.width) * this.ratio;
        var h =  parseInt(this.image.height) * this.ratio;

        var pw = (400 - w) / 2;
        var ph = (400 - h) / 2;

        this.$imageBox.css({
            "background-image": "url(" + this.image.src + ")",
            "background-size": w +"px " + h + "px",
            "background-position": pw + "px " + ph + "px",
            "background-repeat": "no-repeat"});
    },
    
    onTouchStart: function(e)
    {
        Z.E.forbidden(e);
        this.state.dragging = true;
        var theTouch = e.touches[0];
        this.state.mouseX = theTouch.clientX;
        this.state.mouseY = theTouch.clientY;
    },
    
    onTouchMove: function(e)
    {
        Z.E.forbidden(e);
        if (!this.state.dragging)
            return;
        
        var theTouch = e.touches[0];
        var x = theTouch.clientX - this.state.mouseX;
        var y = theTouch.clientY - this.state.mouseY;
        
        var bg = this.$imageBox.css('background-position').split(' ');
        
        var bgX = x + parseInt(bg[0]);
        var bgY = y + parseInt(bg[1]);
        
        this.$imageBox.css('background-position', bgX +'px ' + bgY + 'px');
        
        this.state.mouseX = theTouch.clientX;
        this.state.mouseY = theTouch.clientY;
    },
    
    onTouchEnd: function(e)
    {
        Z.E.forbidden(e);
        this.state.dragging = false;
    },
    
    onZoomIn: function()
    {
        this.ratio *= 1.1;
        this.setBackground();
    },
    
    onZoomOut: function()
    {
        this.ratio *= 0.9;
        this.setBackground();
    },
    
    getDataURL: function()
    {
        var width = this.$square.offsetWidth(),
            height = this.$square.offsetHeight(),
            canvas = document.createElement("canvas"),
            dim = this.$imageBox.css('background-position').split(' '),
            size = this.$imageBox.css('background-size').split(' '),
            dx = parseInt(dim[0]) - this.$imageBox.offsetWidth()/2 + width/2,
            dy = parseInt(dim[1]) - this.$imageBox.offsetHeight()/2 + height/2,
            dw = parseInt(size[0]),
            dh = parseInt(size[1]),
            sh = parseInt(this.image.height),
            sw = parseInt(this.image.width);

        canvas.width = width;
        canvas.height = height;
        var context = canvas.getContext("2d");
        context.drawImage(this.image, 0, 0, sw, sh, dx, dy, dw, dh);
        var imageData = canvas.toDataURL('image/png');
        return imageData;
    },
    
    getBlob: function()
    {
        var imageData = this.getDataURL();
        var b64 = imageData.replace('data:image/png;base64,','');
        var binary = atob(b64);
        var array = [];
        for (var i = 0; i < binary.length; i++) {
            array.push(binary.charCodeAt(i));
        }
        return new Blob([new Uint8Array(array)], {type: 'image/png'});
    }
}

//END
})(zhiqim);