Need Help: Crop Image

[erich.wanker]

Hello, 

 

i am searching something like this: http://www.jqueryrain.com/?hXYC0XET

 

 

I want to upload a Image

crop ia region to a fix proportion (16 to 9)  .. and save it 2 times in different size:  first size is needed for preview . second size is need in detailed View

and save this 2 images as   12345_small.jpg  and 12345_big.jpg

 

 

My Javascript experiance is very small :-(  ....

 

How can i realise this

 

ThanX

Erich

[Ron]

This is a Javascript issue, and you can load the pic in the html5 canvas,

draw the rectangle, do some calculations and send the crop data to the

server, and do the cropping there.

 

I did this in JS from the bottom, and it was a bit of work - about one day.

I wanted handles on the rectangle, and real-time upscaled result showing,

so it was a little tricky to come up with very compressed code.

 

The biggest problem is to find good routines for the resampling on the server side.

 

Here is the script, which you load in a HTML frame and then respond to the events:

<canvas id="cropcanvas"></canvas>
<script type="text/javascript">
  var cCanvas = document.getElementById("cropcanvas");
  var cx = cCanvas.getContext("2d");
  var rects = [];  
  var bw=8;
  var mDelta = 1;
  var rDelta = 8;
  var rFill = false;
  var keepAspect = true;
  var stdAspect = 1.777;
  var activeRect = 0;
  var drX = 0;
  var drY = 0;
  var drW = 0;
  var drH = 0;
  var newDrX = 0;
  var newDrY = 0;
  var newDrW = 0;
  var newDrH = 0;
  var mcDown = false;
  var imgOriginal = new Image();  
  var cWidth = 1200;
  var cHeight = 400;
  var imgX = 0;
  var imgY = 0;
  var imgW = 0;
  var imgH = 0;
  var resImgW = 480;
  var resImgH = 270;
  var catchOnLine = false;
  var lineCol = "#DDDDDD";
  var boxCol = "#FFFFFF";
  var bgCol = "#CCCCCC"
  var borderCol = "#FFFFFF";
  var backLineCol = "#000000";
  
  function relMouseCoords(event){
    var totalOffsetX = 0;
    var totalOffsetY = 0;
    var canvasX = 0;
    var canvasY = 0;
    var currentElement = this;
    do{
      totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft;
      totalOffsetY += currentElement.offsetTop - currentElement.scrollTop;
    }
    while(currentElement = currentElement.offsetParent);
    canvasX = event.pageX - totalOffsetX;
    canvasY = event.pageY - totalOffsetY;
    return {x:canvasX, y:canvasY}
  }
  HTMLCanvasElement.prototype.relMouseCoords = relMouseCoords;
  
  if(navigator.userAgent.match(/Firefox/)=="Firefox")  var bType = 1;
  if(navigator.userAgent.match(/Chrome/)=="Chrome") var bType = 2; 
  if(navigator.userAgent.match(/.NET/)==".NET")  var bType = 3;    
 
  function getRect(x, y) {
   	 for(i=0;i<rects.length;i++){
	    if ((x>=rects[i].xStart-mDelta) && (x<=rects[i].xStart + rects[i].xWidth+mDelta) && (y>=rects[i].yStart-mDelta) && 
	    (y<=rects[i].yStart + rects[i].yHeight +mDelta)) return rects[i].id; 
	 }   
	 if(catchOnLine)
	 for(i=0;i<rects.length;i++){ 
	    if ( ((x>=drX-rDelta) && (x<=drX+rDelta) && (y>=drY) && (y<=drY+drH)) ||
	    ((x>=drX+drW-rDelta) && (x<=drX+drW+rDelta) && (y>=drY) && (y<=drY+drH)) ||
	    ((x>=drX-rDelta) && (x<=drX+drW+rDelta) && (y>=drY-rDelta) && (y<=drY+rDelta)) ||
	    ((x>=drX-rDelta) && (x<=drX+drW+rDelta) && (y>=drY+drH-rDelta) && (y<=drY+drH+rDelta)) 
	    ) return 0; 	
	 }
	 else
	 for(i=0;i<rects.length;i++){ 
	    if  ((x>=drX+rDelta) && (x<=drX+drW-rDelta) && (y>=drY+rDelta) && (y<=drY+drH-rDelta))  return 0; 	
	 };
	return -1;
   };    
    
 $("#cropcanvas").mousemove(function(event){
    document.getElementById("cropcanvas").focus();
    coords = cCanvas.relMouseCoords(event);
    if(!mcDown)
    activeRect = getRect(coords.x, coords.y)
    if(activeRect!=-1){
    	switch(activeRect){
    		case 0: document.getElementById("cropcanvas").style.cursor = 'move'; break;
			case 1: document.getElementById("cropcanvas").style.cursor = 'nw-resize'; break;
			case 2: document.getElementById("cropcanvas").style.cursor = 'ns-resize'; break;
			case 3: document.getElementById("cropcanvas").style.cursor = 'ne-resize'; break;
			case 4: document.getElementById("cropcanvas").style.cursor = 'ew-resize'; break;
			case 5: document.getElementById("cropcanvas").style.cursor = 'ew-resize'; break;
			case 6: document.getElementById("cropcanvas").style.cursor = 'sw-resize'; break;
			case 7: document.getElementById("cropcanvas").style.cursor = 'ns-resize'; break;
			case 8: document.getElementById("cropcanvas").style.cursor = 'se-resize'; break;
		}
	}
    else document.getElementById("cropcanvas").style.cursor = 'default'; 
    if(mcDown){
		if(keepAspect)
		switch(activeRect){
		  case 0: newDrX = coords.x - moveCX; newDrY = coords.y - moveCY;newDrH = drH; newDrW = drW;break;	
		  case 1: newDrH = drH + drY - coords.y;newDrY = coords.y;newDrW = newDrH * stdAspect;
		    newDrX=drX+(drW-newDrW);break;	 
		  case 2: newDrH = drH + drY - coords.y;newDrY = coords.y;newDrW = newDrH * stdAspect;
		    newDrX=drX+(drW-newDrW)/2;break;	 
		  case 3: newDrH = drH + drY - coords.y;newDrY = coords.y;newDrW = newDrH * stdAspect;newDrX=drX;break;	 
		  case 4: newDrW = drW + drX - coords.x;newDrX =  coords.x;newDrH = newDrW / stdAspect;
		    newDrY=drY+(drH-newDrH)/2; break; 
		  case 5: newDrW =  coords.x - drX;newDrH = newDrW / stdAspect;newDrY=drY+(drH-newDrH)/2;break; 
		  case 6: newDrW = drW + drX - coords.x;newDrX =  coords.x;newDrH =  newDrW / stdAspect;newDrY=drY;break;	 
		  case 7: newDrH =  coords.y - drY;newDrW = newDrH * stdAspect;newDrX=drX+(drW-newDrW)/2;newDrY=drY;break;	
		  case 8: newDrW =  coords.x - drX;newDrH =  newDrW / stdAspect;newDrY=drY;break;	  
		} else
		switch(activeRect){
		  case 0: newDrX = coords.x - moveCX; newDrY = coords.y - moveCY;newDrH = drH; newDrW = drW;break;	
		  case 1: newDrH = drH + drY - coords.y;newDrY = coords.y;newDrW = drW + drX-coords.x;newDrX = coords.x;break;		      
                  case 2: newDrH = drH + drY - coords.y;newDrY = coords.y;break;	 
		  case 3: newDrH = drH + drY - coords.y;newDrY = coords.y;newDrW =  coords.x - drX;break;	 
		  case 4: newDrW = drW + drX - coords.x;newDrX =  coords.x; break; 
		  case 5: newDrW =  coords.x - drX;break; 
		  case 6: newDrW = drW + drX - coords.x;newDrX =  coords.x;newDrH =  coords.y - drY;break;	 
		  case 7: newDrH =  coords.y - drY;break;	
		  case 8: newDrW =  coords.x - drX;newDrH =  coords.y - drY;break;	  
		}
		if((newDrH>50)&&(newDrW>50)&&(newDrX>imgX)&&(newDrX+newDrW<imgX+imgW)&&(newDrY>=imgY)&&(newDrY+newDrH<=imgY+imgH)){
		  drY = newDrY;
		  drH = newDrH;
		  drX = newDrX;
		  drW = newDrW;
		  drawDashRect(newDrX, newDrY, newDrW, newDrH);
		} 
	}
  });
    
  $("#cropcanvas").mousedown(function(event){
   	if(event.which===3) return;
   	coords = cCanvas.relMouseCoords(event);
   	downCX = coords.x;
   	downCY = coords.y;
   	mcDown = true;
   	if(activeRect > -1){
   		moveCX = coords.x - drX;
        moveCY = coords.y -drY;
     // moveCX = coords.x - rects[activeRect-1].xStart;
     // moveCY = coords.y - rects[activeRect-1].yStart;
    } 
  }); 
  
  $("#cropcanvas").mouseout(function(event){
   	mcDown = false;
   	document.getElementById("cropcanvas").style.cursor = 'default'; 
  });	
   
 $("#cropcanvas").mouseup(function(event){
    coords = cCanvas.relMouseCoords(event);
  	mcDown = false;
  	document.getElementById("cropcanvas").style.cursor = 'default'; 
   }); 
   //(x, y, w, h)
  function drawDashRect(){
  	cx.beginPath();
    cx.strokeStyle = backLineCol;
    cx.fillStyle = bgCol;
    cx.lineWidth = 1.5;
    cx.rect(0, 0, cWidth, cHeight);
    cx.stroke();
    cx.fill();
    cx.save();
    cx.beginPath();
    cx.strokeStyle = "#000000";
     if ( cx.setLineDash !== undefined )   cx.setLineDash([4,4]);
    cx.lineWidth = 1.5;
    cx.moveTo(cWidth / 2, 0);
    cx.lineTo(cWidth / 2, cHeight);
    cx.stroke();
    cx.restore();
  	if((imgOriginal.height>imgOriginal.width)||(imgOriginal.height>cHeight)){
  	  imgH = cHeight;
  	  imgW = imgOriginal.width * (imgH / imgOriginal.height);
  	  imgY = (cHeight - imgH) / 2;
  	  imgX = (cWidth / 2 - imgW) / 2;
  	  if(drX<imgX)drX = imgX;
  	  if(drY<imgY)drY = imgY;
  	  if(drW>imgW){drW = imgW; drH= imgW / stdAspect;}
  	  if(drH>imgH)drH = imgH;
  	  if(drY+drH>cHeight)drY=(cHeight-drH)/2;
  	}
  	else {
  	  imgW = cWidth / 2;
  	  imgH = imgOriginal.height * (imgW / imgOriginal.width);
  	  imgY = (cHeight - imgH) /2;
  	  imgX = 0;
  	  if(drX<imgX)drX = imgX;
  	  if(drY<imgY)drY = imgY;
  	  if(drW>imgW){drW = imgW; drH= imgW / stdAspect;}
  	  if(drH>imgH)drH = imgH;
  	  if(drY+drH>cHeight)drY=(cHeight-drH)/2;
  	}
  	cx.drawImage(imgOriginal, imgX, imgY , imgW, imgH);
  	
  	cx.save();
    cx.beginPath();
    cx.strokeStyle = lineCol;
     if ( cx.setLineDash !== undefined )   cx.setLineDash([4,4]);
    cx.lineWidth = 1.5;
    cx.rect(drX, drY, drW, drH);
    cx.stroke();
    cx.restore();
    
    rects = [];
    rects.push({id: 1, xStart: drX - bw/2, yStart: drY - bw/2, xWidth: bw, yHeight: bw});
    rects.push({id: 2, xStart: drX + drW/2 - bw/2, yStart: drY- bw/2, xWidth: bw, yHeight: bw});
    rects.push({id: 3, xStart: drX + drW - bw/2, yStart: drY - bw/2, xWidth: bw, yHeight: bw});
    rects.push({id: 4, xStart: drX - bw/2, yStart: drY + drH/2 - bw/2, xWidth: bw, yHeight: bw});
    rects.push({id: 5, xStart: drX + drW - bw/2, yStart: drY + drH/2 - bw/2, xWidth: bw, yHeight: bw});
    rects.push({id: 6, xStart: drX - bw/2, yStart: drY + drH - bw/2, xWidth: bw, yHeight: bw});
    rects.push({id: 7, xStart: drX + drW/2 - bw/2, yStart: drY + drH - bw/2, xWidth: bw, yHeight: bw});
    rects.push({id: 8, xStart: drX + drW - bw/2, yStart: drY + drH - bw/2, xWidth: bw, yHeight: bw});
    
    cx.beginPath();
    cx.fillStyle = boxCol;
    cx.strokeStyle = boxCol;
    cx.lineWidth = 1.5;
    for(i=0;i<rects.length;i++){
		cx.rect(rects[i].xStart, rects[i].yStart, rects[i].xWidth, rects[i].yHeight)
	}
    if(rFill)cx.fill();else cx.stroke();
    
    //draw resulting img
    if(imgOriginal.height>imgOriginal.width){
      cx.drawImage(imgOriginal, 
      1/(cHeight / imgOriginal.height)  * (drX - imgX), 
      1/(cHeight / imgOriginal.height)  * drY,
      1/(cHeight / imgOriginal.height)  * drW , 
      1/(cHeight / imgOriginal.height)  * drH, 
      cWidth / 2 + cWidth / 4 - resImgW / 2,  
      cHeight / 2 - resImgH / 2 , 
      resImgW, resImgH  );
    } else {
      cx.drawImage(imgOriginal, 
      1/(cWidth / 2 / imgOriginal.width)  * drX, 
      1/(cWidth / 2 / imgOriginal.width)  * (drY - imgY),
      1/(cWidth / 2 / imgOriginal.width)  * drW , 
      1/(cWidth / 2 / imgOriginal.width)  * drH, 
      cWidth / 2 + cWidth / 4 - resImgW / 2,  
      cHeight / 2 - resImgH / 2 , 
      resImgW, resImgH  );
     }
     cx.beginPath();
     cx.strokeStyle = borderCol;
     cx.lineWidth = 2.5;
	 cx.rect(cWidth / 2 + cWidth / 4 - resImgW / 2,  cHeight / 2 - resImgH / 2 ,  resImgW, resImgH  );
	 cx.stroke();
  }
  
  imgOriginal.onload = function () {
     resizeCropCanvas();  
  };

  window.addEventListener('resize', resizeCropCanvas, false);
  function resizeCropCanvas() {
    cCanvas.width = window.innerWidth;
    cCanvas.height = window.innerHeight;
	drX = 50;
    drY = 65;
    drW = 480;
    drH = 270;	
    newDrX = drX;
    newDrY = drY;
    newDrW = drW;
    newDrH = drH;
    drawDashRect();
  }

  imgOriginal.src = "/images/upload.png";  
  
  
  //resizeCanvas();  
  function getCropData(){
  	if(imgOriginal.height>imgOriginal.width)
  	ajaxRequest(CropForm.cropFrame, ['cropData'], {  
  	x: 1/(cHeight / imgOriginal.height)  * (drX - imgX), 
    y: 1/(cHeight / imgOriginal.height)  * drY,
    w: 1/(cHeight / imgOriginal.height)  * drW , 
    h: 1/(cHeight / imgOriginal.height)  * drH });	
    }
    else
    ajaxRequest(CropForm.cropFrame, ['cropData'], {  
    x: 1/(cWidth / 2 / imgOriginal.width)  * drX, 
    y:  1/(cWidth / 2 / imgOriginal.width)  * (drY - imgY),
    w:  1/(cWidth / 2 / imgOriginal.width)  * drW , 
    h:  1/(cWidth / 2 / imgOriginal.width)  * drH }); 
  }
  }
  
</script>

[zilav]

Upload image on server and perform processing with http://imaginglib.sourceforge.net/as needed.

[erich.wanker]

WOW ... coool 

 

 

THANX a lot 

 

:-)

 

nice greetings

Erich

[Ron]

You can test the script above in an example project, found at

http://forums.unigui.com/index.php?/topic/6685-crop-image/