JS图片裁切组件Demo代码

时间：2013-06-04 08:15 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>图片裁切组件</title>
    <style>
        .c_body{ position: relative; }
        #wrap,
        #preview{ border: 1px solid #eee; padding: 10px;}
        #wrap{ width: 450px; height: 450px; }
        #preview{ position: absolute; top: 150px; left: 500px;}
        #previewDiv{ width: 200px; height: 200px; overflow: hidden; }
    </style>
    <script type="text/javascript">
        // 裁切组件构造函数
        function Clip() {
            this.initialize.apply(this,arguments);
        };
        Clip.prototype = {
            initialize: function(config){
                var that = this;
                // 初始化
        that.el = config.el;
                that.el.parentNode.style.position = 'relative';
                that.layer = document.createElement('div');
                that.layer.style.position = 'absolute';
                that.layer.style.background = '#000';
                that.layer.style.border = '1px dashed #fff';
                that.layer.style.opacity = '.5';
                that.layer.style.cursor = 'move';
                that.layer.draggable = true;
                that.el.parentNode.appendChild(that.layer);
                that.cb = config.cb;
                // 获取缩放系数
                var img = new Image(),
                    getImgOriginalSize = function(){
                        that.originWidth = this.width;
                        that.ratio = that.el.offsetWidth / this.width;
                    };
                img.src = that.el.src;
                if (img.complete) {
                    getImgOriginalSize.call(img);
                    img = null;
                } else {
                    img.onload = function(){
                        getImgOriginalSize.call(img);
                        img = null;
                    };
                };
                // 事件绑定
                var startSelect = function(e){
                    that.startSelect.call(that,e);
                };
                var dragSelect = function(e){
                    that.dragSelect.call(that,e);
                };
                var dragLayer = function(e){
                    that.dragLayer.call(that,e);
                };
                var dragLayerStart = function(e){
                    that.dragLayerStart.call(that,e);
                };
                that.el.addEventListener('dragstart', startSelect, false);
                that.el.addEventListener('drag', dragSelect, false);
                that.layer.addEventListener('dragstart', dragLayerStart, false);
                that.layer.addEventListener('drag', dragLayer, false);
                document.body.addEventListener('drop', function(e){e.preventDefault();}, false);
            },
            startSelect: function(e) {
                /*** 开始新选择*/
                var that = this,
                    img = document.createElement('img');
                img.src = 'transparent.png';
                e.dataTransfer.setDragImage(img,0,0);
                that.x = e.offsetX;
                that.y = e.offsetY;
                // - 1 修正因为设置坐标+1而增加的长度
        that.maxWidth = that.el.offsetWidth - that.x - 1;
                that.maxHeight = that.el.offsetHeight - that.y - 1;
                that.initLayer(that.x, that.y);
            },
            dragSelect: function(e) {
                /*** 拖动选择*/
                var that = this,
                    w = e.offsetX - that.x,
                    h = e.offsetY - that.y;
                that.changeLayer(w, h);
            },
            initLayer: function(x, y) {
                /*** 初始化选区*/
                var that = this,
                    elX = that.el.offsetLeft,
                    elY = that.el.offsetTop;
                // + 1 鼠标位置在遮罩层上不会触发拖拽事件
        that.layer.style.top = y + elY + 1 +'px';
                that.layer.style.left = x + elX + 1 +'px';
                that.layer.style.width = 0;
                that.layer.style.height = 0;
            },
            changeLayer: function(w, h) {
                /*** 变化选区* [url=home.php?mod=space&uid=143364]@type[/url] [Number] w [宽度]*/
                var that = this,
                    w = Math.max(w, h),
                    max = Math.min(that.maxWidth,that.maxHeight),
                    w = w ? w >= max ? max : w : 0;
                if (w <= 0) {return;};
                that.layer.style.width = w + 'px';
                that.layer.style.height = w + 'px';
                that.w = w;
                that.callback();
            },
            dragLayerStart: function(e) {
                /*** 移动选区*/
                var that = this,
                    img = document.createElement('img');
                img.src = 'transparent.png';
                e.dataTransfer.setDragImage(img,0,0);
                that.layerX = e.x,
                that.layerY = e.y;
                that.layerLeft = parseInt(that.layer.style.left);
                that.layerTop = parseInt(that.layer.style.top);
                that.originX = that.x;
                that.originY = that.y;
            },
            dragLayer: function(e) {
                var that = this,
                    x = e.x - that.layerX,
                    y = e.y - that.layerY,
                    left = that.layerLeft + x,
                    top = that.layerTop + y,
                    maxLeft = that.el.offsetWidth + that.el.offsetLeft - that.layer.offsetWidth,
                    maxTop = that.el.offsetHeight + that.el.offsetTop - that.layer.offsetHeight;
                if (e.x <= 0) {return;};
                if (left < 0) {left = 0};
                if (top < 0) {top = 0};
                if (left > maxLeft) {left = maxLeft};
                if (top > maxTop) {top = maxTop};
                that.layer.style.left = left + 'px';
                that.layer.style.top = top + 'px';
                that.x = that.originX + left - that.layerLeft;
                that.y = that.originY + top - that.layerTop;
                that.callback();
            },
            callback: function(e) {
                /*** 发布回调*/
                var that = this;
                that.stateChange && that.stateChange({
                    x: that.x / that.ratio,
                    y: that.y / that.ratio,
                    width: that.w / that.ratio,
                    height: that.w / that.ratio,
                    originWidth: that.originWidth
                });
            }
        };
        window.onload = function() {
            var clip = new Clip({el: document.querySelector('#wrap img') });
            clip.stateChange = function(o) {
                var ratio = 200 / o.width,
                    left = o.x * ratio,
                    top = o.y * ratio,
                    w = o.originWidth * ratio;
                document.querySelector('#preview img').style.marginLeft = '-' + left + 'px';
                document.querySelector('#preview img').style.marginTop = '-' + top + 'px';
                document.querySelector('#preview img').style.width = w + 'px';
            };
        }
    </script>
</head>
<body>
<div class="c_body">
    <div id="wrap">
        <div id="wrapDiv">
            <img src="http://www.codefans.net/jscss/demoimg/201306/demo.jpg" style="width: 450px;" draggable="true">
        </div>
    </div>
    <div id="preview">
        <div id="previewDiv">
            <img src="http://www.codefans.net/jscss/demoimg/201306/demoz.jpg">
        </div>
    </div>
</div>
</body>
</html>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

图片裁切组件,裁切组件构造函数，完全JavaScript来实现，无jQuery代码，用到的两张演示图片还请自己下载吧，路径请看代码，会的人你懂得。本效果可以用来制作头像上传图片裁切，首先想到的是利用拖拽API（HTML5 drag and drop），实现图片拖拽出选区的功能。 JS图片裁切组件Demo代码由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/pic/4962.html

JS图片裁切组件Demo代码

网页特效