/* AlloyCrop v1.0.4
|
* By dntzhang
|
* Github: https://github.com/AlloyTeam/AlloyCrop
|
*/
|
;(function(){
|
var AlloyFinger = typeof require === 'function'
|
? require('alloyfinger')
|
: window.AlloyFinger
|
var Transform = typeof require === 'function'
|
? require('css3transform').default
|
: window.Transform
|
|
var AlloyCrop = function (option) {
|
this.renderTo = document.body;
|
this.canvas = document.createElement("canvas");
|
this.output = option.output;
|
this.width = option.width;
|
this.height = option.height;
|
this.canvas.width = option.width * this.output;
|
this.canvas.height = option.height * this.output;
|
this.circle = option.circle;
|
if (option.width !== option.height && option.circle) {
|
throw "can't set circle to true when width is not equal to height"
|
}
|
this.ctx = this.canvas.getContext("2d");
|
this.croppingBox = document.createElement("div");
|
this.croppingBox.style.visibility = "hidden";
|
this.croppingBox.className = option.className || '';
|
this.cover = document.createElement("canvas");
|
this.type = option.type || "png";
|
//v1.0.4
|
//this.cover.width = window.innerWidth;
|
//this.cover.height = window.innerHeight;
|
//v1.0.1
|
this.cover.width = document.documentElement.clientWidth;
|
this.cover.height = document.documentElement.clientHeight;
|
|
this.cover_ctx = this.cover.getContext("2d");
|
this.img = document.createElement("img");
|
|
if(option.image_src.substring(0,4).toLowerCase()==='http') {
|
this.img.crossOrigin = 'anonymous';//resolve base64 uri bug in safari:"cross-origin image load denied by cross-origin resource sharing policy."
|
}
|
this.cancel = option.cancel;
|
this.ok = option.ok;
|
|
this.ok_text = option.ok_text || "ok";
|
this.cancel_text = option.cancel_text || "cancel";
|
|
this.croppingBox.appendChild(this.img);
|
this.croppingBox.appendChild(this.cover);
|
this.renderTo.appendChild(this.croppingBox);
|
this.img.onload = this.init.bind(this);
|
this.img.src = option.image_src;
|
|
this.cancel_btn = document.createElement('a');
|
this.cancel_btn.innerHTML = this.cancel_text;
|
this.ok_btn = document.createElement('a');
|
this.ok_btn.innerHTML = this.ok_text;
|
|
this.croppingBox.appendChild(this.ok_btn);
|
this.croppingBox.appendChild(this.cancel_btn);
|
|
this.alloyFingerList = [];
|
};
|
|
AlloyCrop.prototype = {
|
init: function () {
|
|
this.img_width = this.img.naturalWidth;
|
this.img_height = this.img.naturalHeight;
|
Transform(this.img,true);
|
var scaling_x = window.innerWidth / this.img_width,
|
scaling_y = window.innerHeight / this.img_height;
|
var scaling = scaling_x > scaling_y ? scaling_y : scaling_x;
|
/*this.initScale = scaling;
|
this.originScale = scaling;
|
this.img.scaleX = this.img.scaleY = scaling;*/
|
this.initScale = scaling_x;
|
this.originScale = scaling_x;
|
this.img.scaleX = this.img.scaleY = scaling_x;
|
this.first = 1;
|
var self = this;
|
this.alloyFingerList.push(new AlloyFinger(this.croppingBox, {
|
multipointStart: function (evt) {
|
//reset origin x and y
|
//v1.0.4
|
//var centerX = (evt.touches[0].pageX + evt.touches[1].pageX) / 2;
|
//var centerY = (evt.touches[0].pageY + evt.touches[1].pageY) / 2;
|
//v1.0.1
|
var centerX = (evt.touches[0].clientX + evt.touches[1].clientX) / 2;
|
var centerY = (evt.touches[0].clientY + evt.touches[1].clientY) / 2;
|
|
var cr = self.img.getBoundingClientRect();
|
var img_centerX = cr.left + cr.width / 2;
|
var img_centerY = cr.top + cr.height / 2;
|
var offX = centerX - img_centerX;
|
var offY = centerY - img_centerY;
|
var preOriginX = self.img.originX
|
var preOriginY = self.img.originY
|
self.img.originX = offX / self.img.scaleX;
|
self.img.originY = offY / self.img.scaleY;
|
//reset translateX and translateY
|
|
self.img.translateX += offX - preOriginX * self.img.scaleX;
|
self.img.translateY += offY - preOriginY * self.img.scaleX;
|
|
|
if(self.first == 1){
|
self.img.scaleX = self.img.scaleY = self.initScale * 1.1;
|
++self.first;
|
}
|
|
self.initScale = self.img.scaleX;
|
|
},
|
pinch: function (evt) {
|
//v1.0.1
|
self.img.scaleX = self.img.scaleY = self.initScale * evt.zoom;
|
|
var cr = self.img.getBoundingClientRect();
|
var boxOffY = (document.documentElement.clientHeight - self.height)/2;
|
|
var tempo = evt.zoom;
|
var dw = (cr.width * tempo - cr.width)/2;
|
var dh = (cr.height - cr.height * tempo)/2;
|
if( (self.initScale * tempo <= 1.6 ) && (self.initScale * tempo >= self.originScale) && (dw >= cr.left) && (-dw <= (cr.right - self.width) ) && (dh <= (boxOffY - cr.top) ) && (dh <= (cr.bottom-boxOffY-self.height)) ){
|
self.img.scaleX = self.img.scaleY = self.initScale * tempo;
|
}
|
},
|
pressMove: function (evt) {
|
//v1.0.1
|
self.img.translateX += evt.deltaX;
|
self.img.translateY += evt.deltaY;
|
|
var cr = self.img.getBoundingClientRect();
|
var boxOffY = (document.documentElement.clientHeight - self.height)/2;
|
if((boxOffY - cr.top - evt.deltaY >= 0) && (cr.bottom + evt.deltaY - boxOffY>= self.height)){
|
self.img.translateY += evt.deltaY;
|
}
|
var boxOffX = (document.documentElement.clientWidth - self.width)/2;
|
if((cr.left + evt.deltaX <= boxOffX) && (cr.right + evt.deltaX - boxOffX >= self.width)){
|
self.img.translateX += evt.deltaX;
|
}
|
evt.preventDefault();
|
}
|
}));
|
|
this.alloyFingerList.push(new AlloyFinger(this.cancel_btn, {
|
touchStart:function(){
|
self.cancel_btn.style.backgroundColor = '#ffffff';
|
self.cancel_btn.style.color = '#3B4152';
|
},
|
tap: this._cancel.bind(this)
|
}));
|
|
this.alloyFingerList.push(new AlloyFinger(this.ok_btn, {
|
touchStart:function(){
|
self.ok_btn.style.backgroundColor = '#2bcafd';
|
self.ok_btn.style.color = '#ffffff';
|
},
|
tap: this._ok.bind(this)
|
}));
|
|
this.alloyFingerList.push(new AlloyFinger(document, {
|
touchEnd: function () {
|
self.cancel_btn.style.backgroundColor = '#ffffff';
|
self.ok_btn.style.backgroundColor = '#2bcafd';
|
}
|
}));
|
|
this.renderCover();
|
this.setStyle();
|
|
},
|
_cancel: function () {
|
var self = this;
|
setTimeout(function () {
|
self.croppingBox && self._css(self.croppingBox, {
|
display: "none"
|
});
|
self.destroy();
|
}, 300);
|
this.cancel();
|
},
|
_ok: function () {
|
this.crop();
|
var self = this;
|
setTimeout(function () {
|
self.croppingBox && self._css(self.croppingBox, {
|
display: "none"
|
});
|
self.destroy();
|
}, 300);
|
this.ok(this.canvas.toDataURL("image/" + this.type), this.canvas);
|
},
|
renderCover: function () {
|
var ctx = this.cover_ctx,
|
w = this.cover.width,
|
h = this.cover.height,
|
cw = this.width,
|
ch = this.height;
|
ctx.save();
|
ctx.fillStyle = "black";
|
ctx.globalAlpha = 0.7;
|
ctx.fillRect(0, 0, this.cover.width, this.cover.height);
|
ctx.restore();
|
ctx.save();
|
ctx.globalCompositeOperation = "destination-out";
|
ctx.beginPath();
|
if (this.circle) {
|
ctx.arc(w / 2, h / 2, cw / 2 - 4, 0, Math.PI * 2, false);
|
} else {
|
ctx.rect(w / 2 - cw / 2, h / 2 - ch / 2, cw, ch)
|
}
|
ctx.fill();
|
ctx.restore();
|
ctx.save();
|
ctx.beginPath();
|
ctx.strokeStyle = "white";
|
if (this.circle) {
|
ctx.arc(w / 2, h / 2, cw / 2 - 4, 0, Math.PI * 2, false);
|
} else {
|
ctx.rect(w / 2 - cw / 2, h / 2 - ch / 2, cw, ch)
|
}
|
ctx.stroke();
|
},
|
setStyle: function () {
|
this._css(this.cover, {
|
position: "fixed",
|
zIndex: "3000",
|
left: "0px",
|
top: "0px"
|
});
|
|
this._css(this.croppingBox, {
|
color: "white",
|
textAlign: "center",
|
fontSize: "18px",
|
textDecoration: "none",
|
visibility: "visible"
|
});
|
|
this._css(this.img, {
|
position: "fixed",
|
zIndex: "2999",
|
left: "50%",
|
// error position in meizu when set the top 50%
|
top: window.innerHeight / 2 + "px",
|
marginLeft: this.img_width / -2 + "px",
|
marginTop: this.img_height / -2 + "px"
|
});
|
|
|
this._css(this.ok_btn, {
|
position: "fixed",
|
zIndex: "3001",
|
width: "100px",
|
right: "50px",
|
lineHeight: "40px",
|
height: "40px",
|
bottom: "20px",
|
borderRadius: "2px",
|
color: "#ffffff",
|
backgroundColor: "#2bcafd"
|
|
});
|
|
this._css(this.cancel_btn, {
|
position: "fixed",
|
zIndex: "3001",
|
width: "100px",
|
height: "40px",
|
lineHeight: "40px",
|
left: "50px",
|
bottom: "20px",
|
borderRadius: "2px",
|
color: "#3B4152",
|
backgroundColor: "#ffffff"
|
|
});
|
},
|
crop: function () {
|
this.calculateRect();
|
//v1.0.1
|
this.ctx.drawImage(this.img, this.crop_rect[0], this.crop_rect[1], this.crop_rect[2], this.crop_rect[3], 0, 0, this.canvas.width, this.canvas.height);
|
//v1.0.4
|
//this.ctx.drawImage(this.img, this.crop_rect[0], this.crop_rect[1], this.crop_rect[2], this.crop_rect[3], 0, 0, this.crop_rect[2]*this.img.scaleX*this.output, this.crop_rect[3]*this.img.scaleY*this.output);
|
|
},
|
calculateRect: function () {
|
var cr = this.img.getBoundingClientRect();
|
var c_left = window.innerWidth / 2 - this.width / 2;
|
var c_top = window.innerHeight / 2 - this.height / 2;
|
var cover_rect = [c_left, c_top, this.width + c_left, this.height + c_top];
|
var img_rect = [cr.left, cr.top, cr.width + cr.left, cr.height + cr.top];
|
var intersect_rect = this.getOverlap.apply(this, cover_rect.concat(img_rect));
|
var left = (intersect_rect[0] - img_rect[0]) / this.img.scaleX;
|
var top = (intersect_rect[1] - img_rect[1]) / this.img.scaleY;
|
var width = intersect_rect[2] / this.img.scaleX;
|
var height = intersect_rect[3] / this.img.scaleY;
|
|
if (left < 0) left = 0;
|
if (top < 0) top = 0;
|
if (left + width > this.img_width) width = this.img_width - left;
|
if (top + height > this.img_height) height = this.img_height - top;
|
|
this.crop_rect = [left, top, width, height];
|
},
|
// top left (x1,y1) and bottom right (x2,y2) coordination
|
getOverlap: function (ax1, ay1, ax2, ay2, bx1, by1, bx2, by2) {
|
if (ax2 < bx1 || ay2 < by1 || ax1 > bx2 || ay1 > by2) return [0, 0, 0, 0];
|
|
var left = Math.max(ax1, bx1);
|
var top = Math.max(ay1, by1);
|
var right = Math.min(ax2, bx2);
|
var bottom = Math.min(ay2, by2);
|
return [left, top, right - left, bottom - top]
|
},
|
_css: function (el, obj) {
|
for (var key in obj) {
|
if (obj.hasOwnProperty(key)) {
|
el.style[key] = obj[key];
|
}
|
}
|
},
|
destroy: function () {
|
this.alloyFingerList.forEach(function (alloyFinger) {
|
alloyFinger.destroy();
|
});
|
this.renderTo.removeChild(this.croppingBox);
|
for(var key in this) {
|
delete this[key];
|
}
|
}
|
};
|
|
if (typeof module !== 'undefined' && typeof exports === 'object') {
|
module.exports = AlloyCrop;
|
}else {
|
window.AlloyCrop = AlloyCrop;
|
}
|
})();
|
