JS图片裁切组件实现及Demo代码

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

特效演示:  http://www.codesocang.com/texiao/pic/4962.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>
<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>

标签