erich.wanker Posted May 3, 2016 Posted May 3, 2016 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 Quote
Ron Posted May 6, 2016 Posted May 6, 2016 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> Quote
zilav Posted May 7, 2016 Posted May 7, 2016 Upload image on server and perform processing with http://imaginglib.sourceforge.net/as needed. Quote
erich.wanker Posted May 10, 2016 Author Posted May 10, 2016 WOW ... coool THANX a lot :-) nice greetings Erich Quote
Ron Posted May 14, 2016 Posted May 14, 2016 You can test the script above in an example project, found at http://forums.unigui.com/index.php?/topic/6685-crop-image/ Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.