Kom ihåg mig?
Home Menu

Menu


Beskära bild i Javascript med ration 3:4

 
Ämnesverktyg Visningsalternativ
Oläst 2005-08-10, 20:14 #1
Christoffer V Christoffer V är inte uppkopplad
Nykomling
 
Reg.datum: Sep 2003
Inlägg: 6
Christoffer V Christoffer V är inte uppkopplad
Nykomling
 
Reg.datum: Sep 2003
Inlägg: 6
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>
Christoffer V är inte uppkopplad   Svara med citatSvara med citat
 


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

Regler för att posta
Du får inte posta nya ämnen
Du får inte posta svar
Du får inte posta bifogade filer
Du får inte redigera dina inlägg

BB-kod är
Smilies är
[IMG]-kod är
HTML-kod är av

Forumhopp


Alla tider är GMT +2. Klockan är nu 22:23.

Programvara från: vBulletin® Version 3.8.2
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Svensk översättning av: Anders Pettersson
 
Copyright © 2017