this.addEvents({
/**
- * @event beforeSelectFile
+ * @event beforeselectfile
* Fire before select file
* @param {Roo.bootstrap.UploadCropbox} this
*/
*/
"exception" : true,
/**
- * @event beforeloadimage
- * Fire before load the image
+ * @event beforeloadcanvas
+ * Fire before load the canvas
* @param {Roo.bootstrap.UploadCropbox} this
* @param {String} src
*/
- "beforeloadimage" : true
+ "beforeloadcanvas" : true
});
};
file : false,
exif : {},
baseRotate : 1,
+ cropType : 'image/jpeg',
getAutoCreate : function()
{
initEvents : function()
{
+ this.urlAPI = (window.createObjectURL && window) ||
+ (window.URL && URL.revokeObjectURL && URL) ||
+ (window.webkitURL && webkitURL);
+
this.bodyEl = this.el.select('.roo-upload-cropbox-body', true).first();
this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
this.bodyHasOnClickEvent = false;
bind : function()
{
+ var _this = this;
+
+ window.addEventListener("resize", function() { _this.resize(); } );
+
if(!this.bodyHasOnClickEvent){
this.bodyEl.on('click', this.beforeSelectFile, this);
this.bodyHasOnClickEvent = true;
}
-// if(Roo.isTouch){
-// this.imageSection.on('touchstart', this.onTouchStart, this);
-// this.imageSection.on('touchmove', this.onTouchMove, this);
-// this.imageSection.on('touchend', this.onTouchEnd, this);
-// }
-//
-// if(!Roo.isTouch){
-// this.imageSection.on('mousedown', this.onMouseDown, this);
-// this.imageSection.on('mousemove', this.onMouseMove, this);
-// var mousewheel = (/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';
-// this.imageSection.on(mousewheel, this.onMouseWheel, this);
-// Roo.get(document).on('mouseup', this.onMouseUp, this);
-// }
+ if(Roo.isTouch){
+ this.bodyEl.on('touchstart', this.onTouchStart, this);
+ this.bodyEl.on('touchmove', this.onTouchMove, this);
+ this.bodyEl.on('touchend', this.onTouchEnd, this);
+ }
+
+ if(!Roo.isTouch){
+ this.bodyEl.on('mousedown', this.onMouseDown, this);
+ this.bodyEl.on('mousemove', this.onMouseMove, this);
+ var mousewheel = (/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';
+ this.bodyEl.on(mousewheel, this.onMouseWheel, this);
+ Roo.get(document).on('mouseup', this.onMouseUp, this);
+ }
this.pictureBtn.on('click', this.beforeSelectFile, this);
reset : function()
{
-// this.scale = 0;
-// this.baseScale = 1;
-// this.rotate = 0;
-// this.baseRotate = 1;
-// this.dragable = false;
-// this.pinching = false;
-// this.mouseX = 0;
-// this.mouseY = 0;
-// this.cropData = false;
-
-
-// this.imageCanvas.dom.innerHTML = '';
-
-// this.imageCanvas.dom.removeAttribute('style');
-// this.image.dom.removeAttribute('style');
-// this.image.attr('src', '');
-
-// if(!this.bodyHasOnClickEvent){
-// this.bodyEl.on('click', this.beforeSelectFile, this);
-// this.bodyHasOnClickEvent = true;
-// }
+ this.scale = 0;
+ this.baseScale = 1;
+ this.rotate = 0;
+ this.baseRotate = 1;
+ this.dragable = false;
+ this.pinching = false;
+ this.mouseX = 0;
+ this.mouseY = 0;
+ this.cropData = false;
},
+ resize : function()
+ {
+ this.setThumbBoxPosition();
+ this.setCanvasPosition();
+ },
+
beforeSelectFile : function(e)
{
e.preventDefault();
this.fireEvent('beforeselectfile', this);
},
- loadCanvasImage : function(src)
+ loadCanvas : function(src)
{
- if(this.fireEvent('beforeloadimage', this, src) != false){
+ if(this.fireEvent('beforeloadcanvas', this, src) != false){
this.reset();
- this.image = document.createElement('img');
+ this.imageEl = document.createElement('img');
var _this = this;
- this.image.addEventListener("load", function(){ _this.onLoadCanvasImage(); });
+ this.imageEl.addEventListener("load", function(){ _this.onLoadCanvas(); });
- this.image.src = src;
+ this.imageEl.src = src;
}
},
- onLoadCanvasImage : function()
+ onLoadCanvas : function()
{
- this.notifyEl.hide();
- this.thumbEl.show();
- this.footerEl.show();
-
- this.setThumbBoxPosition();
-
- this.Orientation();
-
if(this.bodyHasOnClickEvent){
this.bodyEl.un('click', this.beforeSelectFile, this);
this.bodyHasOnClickEvent = false;
}
- this.image.OriginWidth = this.image.naturalWidth || this.image.width,
- this.image.OriginHeight = this.image.naturalHeight || this.image.height,
-
- this.canvasEl = document.createElement("canvas");
-
- this.contextEl = this.canvasEl.getContext("2d");
-
- this.canvasEl.width = this.image.OriginWidth;
- this.canvasEl.height = this.image.OriginHeight;
-
- this.contextEl.drawImage(this.image, 0, 0);
-
- this.previewEl.appendChild(this.canvasEl);
+ this.notifyEl.hide();
+ this.thumbEl.show();
+ this.footerEl.show();
- this.canvasFitToThumbBox();
+ this.imageEl.OriginWidth = this.imageEl.naturalWidth || this.imageEl.width;
+ this.imageEl.OriginHeight = this.imageEl.naturalHeight || this.imageEl.height;
- return;
+ this.setThumbBoxPosition();
+ this.baseRotateLevel();
+ this.baseScaleLevel();
-// this.image.setWidth(Math.ceil(this.image.OriginWidth * this.getScaleLevel(false)));
-// this.image.setHeight(Math.ceil(this.image.OriginHeight * this.getScaleLevel(false)));
+ this.draw();
- this.setCanvasPosition();
},
setCanvasPosition : function()
{
- var pw = Math.ceil((this.imageSection.getWidth() - this.image.getWidth()) / 2);
- var ph = Math.ceil((this.imageSection.getHeight() - this.image.getHeight()) / 2);
+ var pw = Math.ceil((this.bodyEl.getWidth() - this.canvasEl.width) / 2);
+ var ph = Math.ceil((this.bodyEl.getHeight() - this.canvasEl.height) / 2);
- this.imageCanvas.setLeft(pw);
- this.imageCanvas.setTop(ph);
+ this.previewEl.setLeft(pw);
+ this.previewEl.setTop(ph);
},
onMouseDown : function(e)
return;
}
- var minX = Math.ceil(this.thumb.getLeft(true));
- var minY = Math.ceil(this.thumb.getTop(true));
+ var minX = Math.ceil(this.thumbEl.getLeft(true));
+ var minY = Math.ceil(this.thumbEl.getTop(true));
- var maxX = Math.ceil(minX + this.thumb.getWidth() - this.image.getWidth());
- var maxY = Math.ceil(minY + this.thumb.getHeight() - this.image.getHeight());
-
- if(this.rotate == 90 || this.rotate == 270){
- minX = Math.ceil(this.thumb.getLeft(true) - (this.image.getWidth() - this.image.getHeight()) / 2);
- minY = Math.ceil(this.thumb.getTop(true) + (this.image.getWidth() - this.image.getHeight()) / 2);
-
- maxX = Math.ceil(minX + this.thumb.getWidth() - this.image.getHeight());
- maxY = Math.ceil(minY + this.thumb.getHeight() - this.image.getWidth());
- }
+ var maxX = Math.ceil(minX + this.thumbEl.getWidth() - this.canvasEl.width);
+ var maxY = Math.ceil(minY + this.thumbEl.getHeight() - this.canvasEl.height);
var x = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
var y = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
x = x - this.mouseX;
y = y - this.mouseY;
- var bgX = Math.ceil(x + this.imageCanvas.getLeft(true));
- var bgY = Math.ceil(y + this.imageCanvas.getTop(true));
+ var bgX = Math.ceil(x + this.previewEl.getLeft(true));
+ var bgY = Math.ceil(y + this.previewEl.getTop(true));
bgX = (minX < bgX) ? minX : ((maxX > bgX) ? maxX : bgX);
bgY = (minY < bgY) ? minY : ((maxY > bgY) ? maxY : bgY);
- this.imageCanvas.setLeft(bgX);
- this.imageCanvas.setTop(bgY);
+ this.previewEl.setLeft(bgX);
+ this.previewEl.setTop(bgY);
this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
this.mouseY = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
this.scale = (e.getWheelDelta() == 1) ? (this.scale + 1) : (this.scale - 1);
- var width = Math.ceil(this.image.OriginWidth * this.getScaleLevel(false));
- var height = Math.ceil(this.image.OriginHeight * this.getScaleLevel(false));
+ var width = Math.ceil(this.imageEl.OriginWidth * this.getScaleLevel());
+ var height = Math.ceil(this.imageEl.OriginHeight * this.getScaleLevel());
if(
e.getWheelDelta() == -1 &&
(
(
- (this.rotate == 0 || this.rotate == 180) && (width < this.thumb.getWidth() || height < this.thumb.getHeight())
+ (this.rotate == 0 || this.rotate == 180) && (width < this.thumbEl.getWidth() || height < this.thumbEl.getHeight())
)
||
(
- (this.rotate == 90 || this.rotate == 270) && (height < this.thumb.getWidth() || width < this.thumb.getHeight())
+ (this.rotate == 90 || this.rotate == 270) && (height < this.thumbEl.getWidth() || width < this.thumbEl.getHeight())
)
)
){
return;
}
- this.image.setWidth(width);
- this.image.setHeight(height);
-
- this.setCanvasPosition();
-
+ this.draw();
},
onRotateLeft : function(e)
(
(this.rotate == 0 || this.rotate == 180)
&&
- (this.image.getHeight() < this.thumb.getWidth() || this.image.getWidth() < this.thumb.getHeight())
+ (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())
)
||
(
(this.rotate == 90 || this.rotate == 270)
&&
- (this.image.getWidth() < this.thumb.getWidth() || this.image.getHeight() < this.thumb.getHeight())
+ (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())
)
){
this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
- this.imageCanvas.setStyle({
- '-ms-transform' : 'rotate(' + this.rotate + 'deg)',
- '-webkit-transform' : 'rotate(' + this.rotate + 'deg)',
- 'transform' : 'rotate(' + this.rotate + 'deg)'
- });
-
- this.setCanvasPosition();
+ this.draw();
},
(
(this.rotate == 0 || this.rotate == 180)
&&
- (this.image.getHeight() < this.thumb.getWidth() || this.image.getWidth() < this.thumb.getHeight())
+ (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())
)
||
(
(this.rotate == 90 || this.rotate == 270)
&&
- (this.image.getWidth() < this.thumb.getWidth() || this.image.getHeight() < this.thumb.getHeight())
+ (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())
)
){
this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
- this.imageCanvas.setStyle({
- '-ms-transform' : 'rotate(' + this.rotate + 'deg)',
- '-webkit-transform' : 'rotate(' + this.rotate + 'deg)',
- 'transform' : 'rotate(' + this.rotate + 'deg)'
- });
-
- this.setCanvasPosition();
-
+ this.draw();
},
- crop : function()
+ draw : function()
{
- var baseRotateLevel = this.getBaseRotateLevel();
+ this.previewEl.dom.innerHTML = '';
-// this['crop' + baseRotateLevel]();
-// alert(baseRotateLevel);
+ var canvasEl = document.createElement("canvas");
- var canvas = document.createElement("canvas");
+ var contextEl = canvasEl.getContext("2d");
- var context = canvas.getContext("2d");
-
-// alert(this.image.OriginWidth); // 2448
-// alert(this.image.OriginHeight); // 3264
-
-// canvas.width = this.image.OriginWidth > this.image.OriginHeight ? this.image.OriginWidth : this.image.OriginHeight;
-// canvas.height = this.image.OriginWidth > this.image.OriginHeight ? this.image.OriginWidth : this.image.OriginHeight;
-
- canvas.width = 3264;
- canvas.height = 3264;
-
-// centerX = canvas.width / 2;
-// centerY = canvas.height / 2;
-
-// context.translate(centerX, centerY);
-// context.rotate(90 * Math.PI / 180);
-
- context.drawImage(this.image.dom, 0, 0, 1000, 1000, 0, 0, 1000, 1000);
-
- window.open(canvas.toDataURL(this.file.type));
-
- return;
+ canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
+ canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
+ var center = this.imageEl.OriginWidth / 2;
+ if(this.imageEl.OriginWidth < this.imageEl.OriginHeight){
+ canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
+ canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
+ center = this.imageEl.OriginHeight / 2;
+ }
+ contextEl.scale(this.getScaleLevel(), this.getScaleLevel());
- canvas.width = this.minWidth;
- canvas.height = this.minHeight;
+ contextEl.translate(center, center);
+ contextEl.rotate(this.rotate * Math.PI / 180);
+
+ contextEl.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);
- var centerX = this.minWidth / 2;
- var centerY = this.minHeight / 2;
+ this.canvasEl = document.createElement("canvas");
- var cropWidth = this.thumb.getWidth() * this.getScaleLevel(true);
- var cropHeight = this.thumb.getHeight() * this.getScaleLevel(true);
+ this.contextEl = this.canvasEl.getContext("2d");
- var thumbX = Math.ceil(this.thumb.getLeft(true));
- var thumbY = Math.ceil(this.thumb.getTop(true));
+ switch (this.rotate) {
+ case 0 :
+
+ this.canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
+ this.canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
+
+ this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+
+ break;
+ case 90 :
+
+ this.canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
+ this.canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
+
+ if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
+ this.contextEl.drawImage(canvasEl, Math.abs(this.canvasEl.width - this.canvasEl.height), 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+ break;
+ }
+
+ this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+
+ break;
+ case 180 :
+
+ this.canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
+ this.canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
+
+ if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
+ this.contextEl.drawImage(canvasEl, 0, Math.abs(this.canvasEl.width - this.canvasEl.height), this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+ break;
+ }
+
+ this.contextEl.drawImage(canvasEl, Math.abs(this.canvasEl.width - this.canvasEl.height), 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+
+ break;
+ case 270 :
+
+ this.canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
+ this.canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
- var x = (thumbX - this.imageCanvas.getLeft(true)) * this.getScaleLevel(true);
- var y = (thumbY - this.imageCanvas.getTop(true)) * this.getScaleLevel(true);
+ if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
+ this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+ break;
+ }
+
+ this.contextEl.drawImage(canvasEl, 0, Math.abs(this.canvasEl.width - this.canvasEl.height), this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+
+ break;
+ default :
+ break;
+ }
- if(this.rotate == 90){
-
- x = thumbY + (this.image.getWidth() - this.image.getHeight()) / 2 - this.imageCanvas.getTop(true);
- y = this.image.getHeight() - this.thumb.getWidth() - (thumbX - (this.image.getWidth() - this.image.getHeight()) / 2 - this.imageCanvas.getLeft(true));
-
- x = x * this.getScaleLevel(true);
- y = y * this.getScaleLevel(true);
-
- if(this.image.OriginWidth - cropHeight < x){
- x = this.image.OriginWidth - cropHeight;
- }
-
- if(this.image.OriginHeight - cropWidth < y){
- y = this.image.OriginHeight - cropWidth;
- }
-
- x = x < 0 ? 0 : x;
- y = y < 0 ? 0 : y;
-
- cropWidth = this.thumb.getHeight() * this.getScaleLevel(true);
- cropHeight = this.thumb.getWidth() * this.getScaleLevel(true);
-
- canvas.width = this.minWidth > this.minHeight ? this.minWidth : this.minHeight;
- canvas.height = this.minWidth > this.minHeight ? this.minWidth : this.minHeight;
-
- centerX = this.minWidth > this.minHeight ? (this.minWidth / 2) : (this.minHeight / 2);
- centerY = this.minWidth > this.minHeight ? (this.minWidth / 2) : (this.minHeight / 2);
-
- context.translate(centerX, centerY);
- context.rotate(this.rotate * Math.PI / 180);
-
- context.drawImage(this.image.dom, x, y, cropWidth, cropHeight, centerX * -1, centerY * -1, this.minHeight, this.minWidth);
+ this.previewEl.appendChild(this.canvasEl);
- var canvas2 = document.createElement("canvas");
- var context2 = canvas2.getContext("2d");
-
- canvas2.width = this.minWidth;
- canvas2.height = this.minHeight;
-
- context2.drawImage(canvas, Math.abs(this.minWidth - this.minHeight), 0, this.minWidth, this.minHeight, 0, 0, this.minWidth, this.minHeight);
+ this.setCanvasPosition();
+ },
- this.cropImageData = canvas2.toDataURL(this.file.type);
-
- this.fireEvent('crop', this, this.cropImageData);
-
- return;
- }
+ crop : function()
+ {
+ var canvas = document.createElement("canvas");
- if(this.rotate == 270){
-
- x = thumbY + (this.image.getWidth() - this.image.getHeight()) / 2 - this.imageCanvas.getTop(true);
- y = thumbX - (this.image.getWidth() - this.image.getHeight()) / 2 - this.imageCanvas.getLeft(true);
-
- x = (this.image.getWidth() - this.thumb.getHeight() - x) * this.getScaleLevel(true);
- y = y * this.getScaleLevel(true);
-
- if(this.image.OriginWidth - cropHeight < x){
- x = this.image.OriginWidth - cropHeight;
- }
-
- if(this.image.OriginHeight - cropWidth < y){
- y = this.image.OriginHeight - cropWidth;
- }
-
- x = x < 0 ? 0 : x;
- y = y < 0 ? 0 : y;
-
- cropWidth = this.thumb.getHeight() * this.getScaleLevel(true);
- cropHeight = this.thumb.getWidth() * this.getScaleLevel(true);
-
- canvas.width = this.minWidth > this.minHeight ? this.minWidth : this.minHeight;
- canvas.height = this.minWidth > this.minHeight ? this.minWidth : this.minHeight;
-
- centerX = this.minWidth > this.minHeight ? (this.minWidth / 2) : (this.minHeight / 2);
- centerY = this.minWidth > this.minHeight ? (this.minWidth / 2) : (this.minHeight / 2);
-
- context.translate(centerX, centerY);
- context.rotate(this.rotate * Math.PI / 180);
-
- context.drawImage(this.image.dom, x, y, cropWidth, cropHeight, centerX * -1, centerY * -1, this.minHeight, this.minWidth);
+ var context = canvas.getContext("2d");
- var canvas2 = document.createElement("canvas");
- var context2 = canvas2.getContext("2d");
-
- canvas2.width = this.minWidth;
- canvas2.height = this.minHeight;
-
- context2.drawImage(canvas, 0, 0, this.minWidth, this.minHeight, 0, 0, this.minWidth, this.minHeight);
-
- this.cropImageData = canvas2.toDataURL(this.file.type);
-
- this.fireEvent('crop', this, this.cropImageData);
-
- return;
- }
+ canvas.width = this.minWidth;
+ canvas.height = this.minHeight;
- if(this.rotate == 180){
- x = this.image.OriginWidth - this.thumb.getWidth() * this.getScaleLevel(true) - x;
- y = this.image.OriginHeight - this.thumb.getHeight() * this.getScaleLevel(true) - y;
- }
+ var cropWidth = this.thumbEl.getWidth();
+ var cropHeight = this.thumbEl.getHeight();
- if(this.image.OriginWidth - cropWidth < x){
- x = this.image.OriginWidth - cropWidth;
+ var x = this.thumbEl.getLeft(true) - this.previewEl.getLeft(true);
+ var y = this.thumbEl.getTop(true) - this.previewEl.getTop(true);
+
+ if(this.canvasEl.width - cropWidth < x){
+ x = this.canvasEl.width - cropWidth;
}
- if(this.image.OriginHeight - cropHeight < y){
- y = this.image.OriginHeight - cropHeight;
+ if(this.canvasEl.height - cropHeight < y){
+ y = this.canvasEl.height - cropHeight;
}
x = x < 0 ? 0 : x;
y = y < 0 ? 0 : y;
- context.translate(centerX, centerY);
-
- context.rotate(this.rotate * Math.PI / 180);
+ context.drawImage(this.canvasEl, x, y, cropWidth, cropHeight, 0, 0, canvas.width, canvas.height);
- context.drawImage(this.image.dom, x, y, cropWidth, cropHeight, centerX * -1, centerY * -1, canvas.width, canvas.height);
+ this.cropData = canvas.toDataURL(this.cropType);
- this.cropImageData = canvas.toDataURL(this.file.type);
+ this.fireEvent('crop', this, this.cropData);
- this.fireEvent('crop', this, this.cropImageData);
},
setThumbBoxSize : function()
},
- canvasFitToThumbBox : function()
+ baseRotateLevel : function()
{
- var width = this.thumb.getWidth();
- var height = this.image.OriginHeight * width / this.image.OriginWidth;
-
- this.baseScale = width / this.image.OriginWidth;
+ this.baseRotate = 1;
- if(this.image.OriginWidth > this.image.OriginHeight){
- height = this.thumb.getHeight();
- width = this.image.OriginWidth * height / this.image.OriginHeight;
-
- this.baseScale = height / this.image.OriginHeight;
+ if(
+ typeof(this.exif) != 'undefined' &&
+ typeof(this.exif[Roo.bootstrap.UploadCropbox['tags']['Orientation']]) != 'undefined' &&
+ [1, 3, 6, 8].indexOf(this.exif[Roo.bootstrap.UploadCropbox['tags']['Orientation']]) != -1
+ ){
+ this.baseRotate = this.exif[Roo.bootstrap.UploadCropbox['tags']['Orientation']];
}
- return;
+ this.rotate = Roo.bootstrap.UploadCropbox['Orientation'][this.baseRotate];
+
},
- Orientation : function()
+ baseScaleLevel : function()
{
- this.baseRotate = 1;
+ var width, height;
- if(
- typeof(this.exif) == 'undefined' ||
- typeof(this.exif[Roo.bootstrap.UploadCropbox['tags']['Orientation']]) == 'undefined' ||
- [1, 3, 6, 8].indexOf(this.exif[Roo.bootstrap.UploadCropbox['tags']['Orientation']]) == -1
- ){
+ if(this.baseRotate == 6 || this.baseRotate == 8){
+
+ width = this.thumbEl.getHeight();
+ this.baseScale = height / this.imageEl.OriginHeight;
+
+ if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getWidth()){
+ height = this.thumbEl.getWidth();
+ this.baseScale = height / this.imageEl.OriginHeight;
+ }
+
+ if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
+ height = this.thumbEl.getWidth();
+ this.baseScale = height / this.imageEl.OriginHeight;
+
+ if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getHeight()){
+ width = this.thumbEl.getHeight();
+ this.baseScale = width / this.imageEl.OriginWidth;
+ }
+ }
+
return;
}
- this.baseRotate = this.exif[Roo.bootstrap.UploadCropbox['tags']['Orientation']];
+ width = this.thumbEl.getWidth();
+ this.baseScale = width / this.imageEl.OriginWidth;
- },
-
- getBaseRotateLevel : function()
- {
- return (Roo.isIOS) ? Roo.bootstrap.UploadCropbox['Orientation']['iOS'][this.baseRotate] : Roo.bootstrap.UploadCropbox['Orientation']['Android'][this.baseRotate];
+ if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getHeight()){
+ height = this.thumbEl.getHeight();
+ this.baseScale = height / this.imageEl.OriginHeight;
+ }
+
+
+ if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
+
+ height = this.thumbEl.getHeight();
+ this.baseScale = height / this.imageEl.OriginHeight;
+
+ if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getWidth()){
+ width = this.thumbEl.getWidth();
+ this.baseScale = width / this.imageEl.OriginWidth;
+ }
+
+ }
+ return;
},
- getScaleLevel : function(reverse)
+ getScaleLevel : function()
{
- if(reverse){
- return Math.pow(1.1, this.scale * -1) / this.baseScale;
- }
-
return this.baseScale * Math.pow(1.1, this.scale);
},
var x = Math.pow(coords[0] - coords[2], 2);
var y = Math.pow(coords[1] - coords[3], 2);
- this.startDistance = Math.sqrt(x + y);
+ this.startDistance = Math.sqrt(x + y);
this.startScale = this.scale;
var x = Math.pow(coords[0] - coords[2], 2);
var y = Math.pow(coords[1] - coords[3], 2);
- this.endDistance = Math.sqrt(x + y);
+ this.endDistance = Math.sqrt(x + y);
var scale = this.startScale + Math.floor(Math.log(this.endDistance / this.startDistance) / Math.log(1.1));
- var width = Math.ceil(this.image.OriginWidth * this.baseScale * Math.pow(1.1, scale));
- var height = Math.ceil(this.image.OriginHeight * this.baseScale * Math.pow(1.1, scale));
+ var width = Math.ceil(this.imageEl.OriginWidth * this.baseScale * Math.pow(1.1, scale));
+ var height = Math.ceil(this.imageEl.OriginHeight * this.baseScale * Math.pow(1.1, scale));
if(
this.endDistance / this.startDistance < 1 &&
(
(
- (this.rotate == 0 || this.rotate == 180) && (width < this.thumb.getWidth() || height < this.thumb.getHeight())
+ (this.rotate == 0 || this.rotate == 180) && (width < this.thumbEl.getWidth() || height < this.thumbEl.getHeight())
)
||
(
- (this.rotate == 90 || this.rotate == 270) && (height < this.thumb.getWidth() || width < this.thumb.getHeight())
+ (this.rotate == 90 || this.rotate == 270) && (height < this.thumbEl.getWidth() || width < this.thumbEl.getHeight())
)
)
){
this.scale = scale;
- this.image.setWidth(width);
- this.image.setHeight(height);
-
- this.setCanvasPosition();
-
+ this.draw();
},
},
prepare : function(input)
- {
- if(!input.files || !input.files[0]){
+ {
+ this.file = false;
+ this.exif = {};
+
+ if(typeof(input) === 'string'){
+ this.loadCanvas(input);
return;
}
- this.file = input.files[0];
-
- var noMetaData = !(window.DataView && this.file && this.file.size >= 12 && this.file.type === 'image/jpeg');
-
- if(noMetaData){ // ??? only for jpeg ???
- Roo.log('noMetaData');
+ if(!input.files || !input.files[0] || !this.urlAPI){
return;
}
+ this.file = input.files[0];
+ this.cropType = this.file.type;
+
var _this = this;
if(this.fireEvent('prepare', this, this.file) != false){
}
- _this.urlAPI = (window.createObjectURL && window) ||
- (window.URL && URL.revokeObjectURL && URL) ||
- (window.webkitURL && webkitURL);
-
- if(!_this.urlAPI){
- return;
- }
-
var url = _this.urlAPI.createObjectURL(_this.file);
- _this.loadCanvasImage(url);
+ _this.loadCanvas(url);
return;
}
},
Orientation: {
- iOS : {
1: 0, //'top-left',
// 2: 'top-right',
3: 180, //'bottom-right',
6: 90, //'right-top',
// 7: 'right-bottom',
8: 270 //'left-bottom'
- },
- Android : {
- 1: 0, //'top-left',
-// 2: 'top-right',
- 3: 180, //'bottom-right',
-// 4: 'bottom-left',
-// 5: 'left-top',
- 6: 270, //'right-top',
-// 7: 'right-bottom',
- 8: 90 //'left-bottom'
- }
},
exifTagTypes : {
projects / roojs1 / commitdiff