JS图片裁切组件Demo代码

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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="//ku.shouce.ren/files/images/201601/56a353ef65036.jpg" style="width: 450px;" draggable="true">
        </div>
    </div>
    <div id="preview">
        <div id="previewDiv">
            <img src="//ku.shouce.ren/files/images/201601/56a353f1b9f17.jpg">
        </div>
    </div>
</div>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

JS图片裁切组件Demo代码

分类

图片代码

描述

图片裁切组件,裁切组件构造函数，完全JavaScript来实现，无jQuery代码，用到的两张演示图片还请自己下载吧，路径请看代码，会的人你懂得。本效果可以用来制作头像上传图片裁切，首先想到的是利用拖拽API（HTML5 drag and drop），实现图...