Beskära bild i Javascript med ration 3:4

Christoffer V · 2005-08-10, 20:14

Jag vill beskära en bild med javascript.
Eller iallafall kunna välja vad som ska beskäras med hjälp av ett javascript, sen skicka allt till ett phpskript. Men det löser sig.

Exempel på:
http://www.hamsterpaj.net/cv/cropimage.php

Saken är den att jag vill att den bara ska kunna ändras med en speciell aspect ratio. T ex (3:4)

Hur ska jag ändra i koden för det?
Har försökt själv men det var lite kladdigt.

Kod:

<html>
<head>
<script>
var moz = ((document.all)? false : true);
var ie = ((document.all)? true : false);

function ImageBox(imgId) {
var origX, origY;
var imgPosition, imgDimension;
var dragDiv, overLayer;
var isCropped = false;

function init() {
var img = document.getElementById(imgId);
imgPosition = ElementUtil.getElementPosition(img);
imgDimension = ElementUtil.getElementDimension(img);

// I put this div over the image to remove drag behaviour
// on image in mozilla.
if(moz) {
overLayer = document.createElement("div");
document.body.appendChild(overLayer);
overLayer.style.position = "absolute";
overLayer.style.left = imgPosition.left;
overLayer.style.top = imgPosition.top;
overLayer.style.width = imgDimension.width;
overLayer.style.height = imgDimension.height;
}

dragDiv = document.createElement("div");
document.body.appendChild(dragDiv);
dragDiv.style.visibility = "hidden";
dragDiv.style.position = "absolute";
dragDiv.style.border = "1px solid blue";
dragDiv.style.width = "0px";
dragDiv.style.height = "0px";
dragDiv.style.zIndex = 3;
dragDiv.style.left = "20px";
dragDiv.style.top = "20px";
dragDiv.style.overflow = "hidden";

if(ie) {
// Removes default drag behaviour on image
ElementUtil.addEventListener(img, "drag", function() {return
false;});
// Adds my "drag" behaviour to the image
ElementUtil.addEventListener(img, "mousedown", mouseDown);
}
if(moz) {
ElementUtil.addEventListener(overLayer, "mousedown",
mouseDown);
}
}

function mouseDown(evt) {
if(!evt) {
evt = event;
}
dragDiv.style.visibility = "visible";
dragDiv.style.left = evt.clientX;
dragDiv.style.top = evt.clientY;
dragDiv.style.width = "1px";
dragDiv.style.height = "1px";
origX = evt.clientX;
origY = evt.clientY;
ElementUtil.addEventListener(document, "mousemove", mouseMove);
ElementUtil.addEventListener(document, "mouseup", mouseUp);
evt.cancelBubble = true;
return false;
}

function mouseMove(evt) {
if(!evt) {
evt = event;
}
if(evt.clientX < imgPosition.left) {
dragDiv.style.left = imgPosition.left;
dragDiv.style.width = origX - imgPosition.left;
}
else if(evt.clientX > (imgPosition.left + imgDimension.width)) {

dragDiv.style.left = origX;
if(ie) {
dragDiv.style.width = imgDimension.width - (origX -
imgPosition.left);
}
else if(moz) {
dragDiv.style.width = imgDimension.width - (origX -
imgPosition.left) - 2;
}
}
else {
var newWidth = evt.clientX - origX;
var newLeft = -1;
if(newWidth < 0) {
if(evt.clientX > imgPosition.left) {
newLeft = evt.clientX;
}
newWidth = origX - evt.clientX;
}
if(newLeft != -1) {
dragDiv.style.left = newLeft;
}
dragDiv.style.width = newWidth;
}

if(evt.clientY < imgPosition.top) {
dragDiv.style.top = imgPosition.top;
dragDiv.style.height = origY - imgPosition.top;
}
else if(evt.clientY > (imgPosition.top + imgDimension.height)) {

dragDiv.style.top = origY;
if(ie) {
dragDiv.style.height = imgDimension.height - (origY -
imgPosition.top);
}
else if(moz) {
dragDiv.style.height = imgDimension.height - (origY -
imgPosition.top) - 2;
}
}
else {
var newHeight = evt.clientY - origY;
var newTop = -1;
if(newHeight < 0) {
if(evt.clientY > imgPosition.top) {
newTop = evt.clientY;
}
newHeight = origY - evt.clientY;
}
if(newTop != -1) {
dragDiv.style.top = newTop;
}
dragDiv.style.height = newHeight;
}
}

function mouseUp(evt) {
ElementUtil.removeEventListener(document, "mousemove",
mouseMove);
ElementUtil.removeEventListener(document, "mouseup", mouseUp);
}

init();

this.getX = function() {
return (parseInt(dragDiv.style.left) -
parseInt(imgPosition.left));
}

this.getY = function() {
return (parseInt(dragDiv.style.top) -
parseInt(imgPosition.top));
}

this.getWidth = function() {
return parseInt(dragDiv.style.width);
}

this.getHeight = function() {
return parseInt(dragDiv.style.height);
}

this.toggleCrop = function() {
var img = document.getElementById(imgId);
var str = "";
if(isCropped) {
str = "rect(auto auto auto auto)";
isCropped = false;
}
else {
var top = this.getY();
var left = this.getX();
var bottom = this.getY() + this.getHeight();
var right = this.getX() + this.getWidth();
if(moz) {
bottom = bottom + 2;
right = right + 2;
}
str = "rect(" + top + "px, " +
right + "px, " +
bottom + "px, " + left + "px)";
isCropped = true;
}
img.style.clip = str;
}

this.toString = function() {
var str = "Left: " + this.getX() + "px\n" +
"Top: " + this.getY() + "px\n" +
"Width: " + this.getWidth() + "px\n" +
"Height: " + this.getHeight() + "px";
return str;
}
}
ImageBox.boxes = new Array();
ImageBox.createBox = function(imgId) {
ImageBox.boxes[imgId] = new ImageBox(imgId);
}
ImageBox.getBox = function(imgId) {
return ImageBox.boxes[imgId];
}

var ElementUtil = new Object();
ElementUtil.getElementPosition = function(elt){
var position = new Object();
if(elt.style.position == "absolute") {
position.left = parseInt(elt.style.left);
position.top = parseInt(elt.style.top);
}
else {
position.left = ElementUtil.calcPosition(elt, "Left");
position.top = ElementUtil.calcPosition(elt, "Top");
}
return position;
}

ElementUtil.calcPosition = function(elt, dir){
var tmpElt = elt;
var pos = parseInt(tmpElt["offset" + dir]);
while(tmpElt.tagName != "BODY") {
tmpElt = tmpElt.offsetParent;
pos += parseInt(tmpElt["offset" + dir]);
}
return pos;
}

ElementUtil.getElementDimension = function(elt) {
var dim = new Object();
dim.width = elt.offsetWidth;
dim.height = elt.offsetHeight;
return dim;
}

ElementUtil.addEventListener = function(o, type, handler) {
if(ie) {
o.attachEvent("on" + type, handler);
}
else if(moz) {
o.addEventListener(type, handler, false);
}
}

ElementUtil.removeEventListener = function(o, type, handler) {
if(ie) {
o.detachEvent("on" + type, handler);
}
else if(moz) {
o.removeEventListener(type, handler, false);
}
}

window.onload = function() {
ImageBox.createBox("image");
}

function demo() {
var box = ImageBox.getBox("image");
box.toggleCrop();
alert(box);
}
</script>
</head>
<body>
<input type="button" value="show box data" onclick="demo();">
<table>
<tr>
<td><img
src="http://mozilla.org/frontpage/productShotFirebird.jpg"
id="image"></td>
</tr>
</table>
</body>
</html>

koala · 2005-08-10, 20:59

Kika på källkoden till http://evoluted.net/resize/ och se hur de gjort där.

Christoffer V · 2005-08-10, 23:01

Citat:

Originally posted by koala@Aug 10 2005, 20:59
Kika på källkoden till http://evoluted.net/resize/ och se hur de gjort där.

Den fungerar inte i Firefox + jag har ju fungerade kod, vill bara ha koden så man bara kan rezisa 3:4..

koala · 2005-08-11, 01:05

Men är du för lat för att lära dig formlerna som du behöver lägga till i din kod? De står i klartext i .js-filen, och även om koden bara fungerar i IE så kan du dra intelligenta slutsatser om hur du bör göra för din version...

kullervo · 2005-08-11, 01:25

Citat:

Originally posted by koala@Aug 11 2005, 00:05
Men är du för lat för att lära dig formlerna som du behöver lägga till i din kod? De står i klartext i .js-filen, och även om koden bara fungerar i IE så kan du dra intelligenta slutsatser om hur du bör göra för din version...

Du kan inte veta om det bara är några småsaker som behövs ändras för att få det att fungera i Fx utan att titta i koden först vilket du inte verkar ha gjort. Hela koden kanske bygger på IE-jox. Även om det är enkelt fixat så kanske inte Christoffer V klarar av att koda om den.

Jag var också ute och letade efter något liknande för ett år sedan (utan att hitta) och skulle egentligen fortfarande behöva det.

koala · 2005-08-11, 02:21

Jag kikade i resize.js och noterade bl a följande rader:

Kod:

if(dragType==1) {
  if(constrain) {newY = newX * yxRatio;}
}

Eftersom yxRation := y/x är det inte svårt att lista ut att detta är oberoende av browserval.

EDIT: Nu pratar jag alltså om själva funktionaliteten som ser till att aspektration inte ändras. Huruvida javascriptets IE-specifika drag-funktionalitet fungerar i FF var inte på tapeten så jag struntade i att kommentera detta, även om jag själv använder FF och därmed naturligtvis visste att det var på detta vis.

koala · 2005-08-11, 03:12

[quote]Originally posted by kullervo@Aug 11 2005, 01:25

Citat:

Ursprungligen postat av koala,Aug 11 2005, 00:05

Även om det är enkelt fixat så kanske inte Christoffer V klarar av att koda om den.

Jag var också ute och letade efter något liknande för ett år sedan (utan att hitta) och skulle egentligen fortfarande behöva det.

Med tanke på detta kan jag väl ge en liten skjuts i rätt riktning... Men metoden som används för att ställa in boxens storlek är inte den bästa enligt min mening. Vore mer intuitivt att använda en div som man kan flytta, och som ändrar storlek när man drar i dess kanter. Men jag tänkte inte ägna natten åt att skriva denna kod, så jag lade istället in följande rader i slutet av function mouseMove:

Kod:

    var yxRatio=imgDimension.height/imgDimension.width;    
    var cpW = parseFloat(dragDiv.style.width);
    var cpH = parseFloat(dragDiv.style.height);
    if (cpH<1 || cpW/cpH > yxRatio) dragDiv.style.height = cpW*yxRatio;
    else dragDiv.style.width = cpH/yxRatio;

Vissa justeringa får nog göras eftersom koden ovan förutsätter att man drar sin box neråt åt höger. Övriga riktningar måste man även ändra dragDiv.left och dragDiv.top såklart. Men det lämnas som övning åt läsaren

(Drar man t ex upp åt vänster blir resultatet inte helt önskvärt.)

Resultatet finns här.

thorsell · 2005-09-18, 13:17

Genom att söka på "image cropper" på Google får man många fina tips & lösningar på just detta problem

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

Beskära bild i Javascript med ration 3:4