| 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>
|
