Rectangle 27 6

You would begin by positioning the image and the div in the same wrapper div. I would do this because it will allow you to use jquery's coordinate functions on the div more easily rather than the image.

Once you have those coordinates, you can take a cropped section of that image specified by the div's dimensions and coordinates and use this tutorial:

To save that section onto an HTML canvas element. The canvas element can be invisible if you like.

Once that is saved, you follow this answer:

jquery - How to crop any selected area of an image and save it to the ...

jquery asp.net-mvc-4
Rectangle 27 2

Ok, First of all you have to use server side language to actually save the cropped image image. I would use Jcrop for the cropping, and then send it to the server for the saving process.

Again, you CAN'T save files on the server with javascript only!

jquery - How to crop any selected area of an image and save it to the ...

jquery asp.net-mvc-4
Rectangle 27 1

Not sure if this is what you want but here the code

$(document).ready(function () {
    $(".cover").find("img").each(function () {
        var cover_w = 850;
        var cover_h = 315;
        var img_w = $(this).width();
        var img_h = $(this).height();
        var real_img_h = (cover_w * img_h / img_w) - cover_h;
        $(this).css({
             // top: parseInt(real_img_h * $(this).data("offset_y") / 100 * -1) + "px"
             // this equally does the job
             top: real_img_h * $(this).data("offset_y") / 100 * -1
        });
    });
});

Then make sure that the parent container .cover and images have a CSS relative position

.cover, .cover img {position: relative}

@Rick : since you are parsing an integer, you could omit + "px" at the end of the top CSS property

thank you, great tips. Works perfectly now. Though I used .load(function(){ instead, is there a performance difference between find . each? see edited question with solution.

@Rick : you may use load() if you are loading data from a server; are you? otherwise is overkill. find()/each() would be more suitable in this case.

jQuery to apply css to offset (crop) displayed image - Stack Overflow

jquery css offset
Rectangle 27 0

You can put the path to file into $_SESSION when uploading the target. In your uploaded.php use this code (here you start the session with session_start() and put the formed target path to $_SESSION array):

<?php 
 session_start();
 $target = "uploads/"; 
 $target = $target . basename( $_FILES['filename']['name']) ; 
 $_SESSION['target_path'] = $target;

 $ok=1; 
 if(move_uploaded_file($_FILES['filename']['tmp_name'], $target)) 
 {
 echo "De afbeelding *". basename( $_FILES['filename']['name']). "* is geupload naar de map 'uploads'";
 } 
 else {
 echo "Sorry, er is een probleem met het uploaden van de afbeelding.";
 }
?>
<?php
session_start();
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
$targ_w = 200;
$targ_h = 400;
$jpeg_quality = 90;

$src = $_SESSION['target_path'];
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );

imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
$targ_w,$targ_h,$_POST['w'],$_POST['h']);

header('Content-type: image/jpeg');
imagejpeg($dst_r,NULL,$jpeg_quality);

exit;
}

?>

can you explain this further? i don't fully understand how to do this

it worked. thanks! :D now i can go on with my project! +1 and accepted

jquery - How to crop a selected image and save that cropped image to a...

php jquery html save jcrop
Rectangle 27 0

You need to either reload the page with new image URL specified, or return that URL back to JavaScript so your JS code could replace image without reloading.

i am redirecting to a new page when i click 'Crop Image' i am redirecting to crop.php, and when i click on 'Crop Image' i am on uploaded.php

jquery - How to crop a selected image and save that cropped image to a...

php jquery html save jcrop
Rectangle 27 0

can u explain how it is used??

php - how to crop a zoomed image using jquery - Stack Overflow

php jquery image zoom crop
Rectangle 27 0

Basically the file will need to be POSTed to your PHP script. You can do this with HTML forms(input type='file') or jQuery background uploaders. Uploads are stored by default in the temporary directory of your web server, the current directory can be found by looking at the output of phpinfo().

Next check out the $_FILES global specifically move_uploaded_file(), you can find the image type from the type key in the $_FILES array, though that can be manipulated client side it it might be better to check the file type manually using magic byte functions.

Once you have the file uploaded then you need to manipulate it. You can use either GD or ImageMagick, ImageMagick may not be built-in to your PHP version, GD is pretty common. I am more familar with GD, so I'll suggest you check out the functions imagecreatefromjpeg()/png/gif & imagecopyresampled(), which can both crop and resample. To find out if you need to crop / resize you can check the aspect ratio. Here's a function I whipped up:

function fixRatio($x, $y, $ratio) {
    $ratio = round($ratio,6);
    $iRatio = round($x / $y, 6);
    if ($iRatio > $ratio) {
        $x = ceil($y * $ratio);
    } else if ($iRatio < $ratio) {
        $y = ceil($x * (1 / $ratio));
    }
    return array('x' => $x, 'y' => $y);
}

You input the width, height & desired aspect ratio & this will spit out an array that contains the corrected dimensions. It's probably best to specify the ratio by dividing desired height by desired width, e.g. fixRatio($x, $y, 640/480). You can then use that info to crop the image w/ imagecopyresampled(), at the same time you can specify to the function the destination width & height. So if everything must be 640x480, then you would specify that when calling imagecopyresampled(). You can then use iamgejpeg()/gif/png to output the image as a file to a public directory on your server. Since it's public you can reference it via a URL be it an HTML form asking the user to confirm if they like what they see or into a canvas element.

jquery - Image upload, resolution check, crop and preview. PHP - Stack...

php jquery upload preview
Rectangle 27 0

I wrote a Jquery function you can use just send in the class of the parent div and the img size you want to the function and it will adjust the child img to that size and center it either horizontally or vertically. If the img is smaller than the parent div it will scale the parent div down to the size of the child. (It made since to do it like that for what I was using it for.)

<div class="photo-card-image-wrapper">
    <img src="img.png" />
</div>

Here's the least css needed to make the function work this is needed on the parent div

.photo-card-image-wrapper {
    overflow: hidden;
}

Here's what you need to call the function you just need to send in the parent's class or id like so .photo-card-image-wrapper or if it's an id #photo-card-image-wrapper

$(function() {
  cropAndCenterImage(".photo-card-image-wrapper", 154);
});

This is is the function that you need

function cropAndCenterImage(el, size) {
    //el = img wrapper
    //img = img element
    if (size === undefined || size === null) { 
      size = 154;
    }
    var $el = $(el);
    var $img = $(el + " img");
    //console.log($el);
    //console.log($img);
    $img.width("auto").height("auto");
    var imgWidth = $img.width();
    var imgHeight = $img.height();
    //console.log(imgHeight, imgWidth);

    //hopefully that returns the img to it's default height and width by making the inline style to empty quotes

    if( imgWidth > imgHeight ) {
        //Crop image
      //console.log("width greater than height");
        if ( imgHeight >= size  ) {
            //console.log("hit if");
            $img.height(size);
            imgHeight = $img.height();
            imgWidth = $img.width();
            $el.height(imgHeight).width(imgHeight);
        } else {
            //console.log("hit else");
            $el.height(imgHeight).width(imgHeight);
            $img.height(imgHeight).width(imgWidth);
        }

        //Center image horizontally
        var leftInt = (imgWidth - $el.width()) / 2;
        $img.css({ "margin-left": "-" + leftInt + "px", "margin-top": "0" });
    } else {
        //Crop image
      //console.log("height greater than width");
        if ( imgWidth >= size  ) {
            $img.width(size);
            imgHeight = $img.height();
            imgWidth = $img.width();
            $el.height(imgWidth).width(imgWidth);
        } else {
            $el.height(imgWidth).width(imgWidth);
            $img.height(imgHeight).width(imgWidth);
        }
        imgHeight = $img.height();
        //Center image vertically
        var topInt = (imgHeight - $el.height()) / 2;
        //console.log(topInt);
        $img.css({ "margin-top": "-" + topInt + "px", "margin-left": "0"});
    }

}

I know it's not your typical Jquery function I just haven't learned to do that yet but it's a function none the less.

jquery - Image resize and crop to fit the parent div - Stack Overflow

jquery html css image plugins
Rectangle 27 0

javascript is client side, meaning it runs on your computer. you cannot manipulate an image with js without loading it completely (even if you have an image manipulation library on js).

in your case you want to manipulate an image on a remote host - make an HTTP request that fetches a part of the image using javascript - it's not possible (unless you have a webservice of some kind).

in your case - you can download the entire image from server A and upload it to server B and run the manipulation using server B.

A better way would be to download the entire image from server A - do the manipulations using javascript (and html canvas) and generate the modified version and send the modified version to server B. Since downloading is fast and uploading is slow - this should work pretty fast.

In both cases you need to download the entire image. In the second method you will not have to upload the original (large) image to the server, but only a smaller modified version.

Hm alright this seems reasonable. Right now, im making a JSON request for all the data, including the image URL. So once I get the image URL, how can I cut the image down in JQuery?

i think you need canvas. check out stackoverflow.com/questions/916934/ you can generate an image from a canvas

jQuery - Crop Remove Image? - Stack Overflow

jquery
Rectangle 27 0

Use the WideImage library instead.

function createThumbnail($file, $cropX, $cropY, $cropWidth, $cropHeight, $desiredWidth, $desiredHeight, $shrink = false)
{
    if(file_exists(MPS_ROOT_PATH . "$file") && $cropWidth && $cropHeight)
    {
        $source_path = MPS_ROOT_PATH . $file;

        list( $source_width, $source_height, $source_type ) = getimagesize( $source_path );
        switch ( $source_type )
        {
            case IMAGETYPE_GIF:
                $source_gdim = imagecreatefromgif( $source_path );
                break;

            case IMAGETYPE_JPEG:
                $source_gdim = imagecreatefromjpeg( $source_path );
                break;

            case IMAGETYPE_PNG:
                $source_gdim = imagecreatefrompng( $source_path );
                break;

            default:
                return false;
        }

        if(!$desiredWidth)
        {
            // Desired width not set, computing new width based on original 
            // image's aspect ratio...
            $desiredWidth = $cropWidth * ($desiredHeight / $cropHeight);
        }

        if(!$desiredHeight)
        {
            // Desired height not set, computing new height based on original
            // image's aspect ratio
            $desiredHeight = $cropHeight * ($desiredWidth / $cropWidth);
        }

        if(!$desiredWidth || !$desiredHeight)
        {
            // Desired height or width not set. 
            // Halting image processing and returning file
            return $file;
        }

        $source_aspect_ratio = $cropWidth / $cropHeight;
        $desired_aspect_ratio = $desiredWidth / $desiredHeight;

        if($shrink)
        {
            // Shrink to fit flag set. Inverting computations to make image fit
            // within the desired dimensions...
            if($source_aspect_ratio > $desired_aspect_ratio)
            {
                // Source image is wider than desired aspect ratio, 
                // setting thumbnail width to the desired width and the height 
                // will be computed based on the original image's aspect ratio
                $temp_width = $desiredWidth;
                $temp_height = (int) ($desiredWidth / $source_aspect_ratio);
            }
            else
            {
                // Source image is taller than desired aspect ratio, 
                // setting thumbnail height to the desired height and the width 
                // will be computed based on the original image's aspect ratio
                $temp_height = $desiredHeight;
                $temp_width = (int) ($desiredHeight * $source_aspect_ratio);
            }
        }
        // shrink to fit not set
        else
        {
            if($source_aspect_ratio > $desired_aspect_ratio)
            {
                // Source image is wider than desired aspect ratio, 
                // setting thumbnail height to the desired height to fill the 
                // desired aspect ratio and the width will be computed based on 
                // the original image's aspect ratio
                $temp_height = $desiredHeight;
                $temp_width = (int) ($desiredHeight * $source_aspect_ratio);
            }
            else
            {
                // Source image is taller than desired aspect ratio, 
                // setting thumbnail width to the desired width to fill the 
                // desired aspect ratio and the width will be computed based on 
                // the original image's aspect ratio");
                $temp_width = $desiredWidth;
                $temp_height = (int) ($desiredWidth / $source_aspect_ratio);
            }
        }

        $temp_gdim = imagecreatetruecolor($temp_width, $temp_height);

        // Copying a $cropWidth x $cropHeight image from the source 
        // file at ($cropX, $cropY) and resampling it to fit the temporary 
        // $temp_width x $temp_height thumbnail at (0, 0)
        imagecopyresampled(
            $temp_gdim,
            $source_gdim,
            0, 0,
            $cropX, $cropY,
            $temp_width, $temp_height,
            $cropWidth, $cropHeight
        );

        $x0 = ($desiredWidth - $temp_width) / 2;
        $y0 = ($desiredHeight - $temp_height) / 2;
        // Positioning the temporary $temp_width x $temp_height thumbnail in 
        // the center of the final $desiredWidth x $desiredHeight thumbnail...
        // Creating final thumbnail canvas at $desiredWidth x $desiredHeight
        $desired_gdim = imagecreatetruecolor($desiredWidth, $desiredHeight);

        $white = imagecolorallocate($desired_gdim, 255, 255, 255);
        imagefill($desired_gdim, 0, 0, $white);
        // Filling final thumbnail canvas with white

        // Copying a $temp_width x $temp_height image from the temporary 
        // thumbnail at (0, 0) and placing it in the final 
        // thumbnail at ($x0, $y0)
        imagecopy(
            $desired_gdim,
            $temp_gdim,
            $x0, $y0,
            0, 0,
            $temp_width, $temp_height
        );

        $pathInfo = pathinfo($file);
        $thumbFile = "images/thumbs/thumb_" . basename($pathInfo["filename"]) . ".jpg";

        if(imagejpeg($desired_gdim, MPS_ROOT_PATH . $thumbFile, 80))
        {
            return $thumbFile;
        }
        else
        {
            return 1;
        }
    }
    else
    {
        echo "Image File Does not exist or Invalid crop parameters!";
        return false;
    }
}

No need - PHP can do this internally. Please do a little research before posting your answer.

@JamWaffles: I know what I am talking about. I know that PHP can do this by itself, I have been using GD2 to crop and resize images too but using libraries will ease the burden of the developer so the developer can focus on the bigger parts of the script.

That's true, but if the developer only needs one function out of an entire library, why add the extra bloat? If they need to re-use it or expand it later, PHP has classes for a reason :-)

Well, I think I understand where you are coming from. It's just that I've been in this situation where I had tight deadlines and I had to spend days developing my cropping function with its 30 lines or so, only to find out that it can be done in 1 line using a library. =) @OP: I will post my cropping function later. Hang in there

jquery - PHP GD crop & scale image - Stack Overflow

php jquery image crop
Rectangle 27 0

Here's a function that you can pass the destination dimension to and will scale and crop from the center, maintain aspect ratio, and will scale up. This is easy to implement with the picture element for responsive design. If you change your destination dimensions, just delete the outputted files and this will recreate the images in their absence.

<?php
    function scaleCrop($src, $dest, $destW, $destH, $anchor){
        if(!file_exists($dest) && is_file($src) && is_readable($src)){
            $srcSize = getimagesize($src);
            $srcW = $srcSize[0];
            $srcH = $srcSize[1];
            $srcRatio = $srcW / $srcH;
            $destRatio = $destW / $destH;
            $img = (imagecreatefromjpeg($src));
            $imgNew = imagecreatetruecolor($destW, $destH);

            if ($srcRatio < $destRatio){
                $scale = $srcW / $destW;
            }
            elseif($srcRatio >= $destRatio){
                $scale = $srcH / $destH;
            }
            $srcX = ($srcW - ($destW * $scale)) / 2;
            if($anchor = 'middle'){
                $srcY = ($srcH - ($destH * $scale)) / 2;
            }
            elseif($anchor = 'top'){
                $srcY = 0;
            }
            elseif($anchor = 'bottom'){
                $srcY = $srcH - ($destH * $scale);
            }
            if($srcX < 0){$srcX = 0;};
            if($srcY < 0){$srcY = 0;};
            imagecopyresampled($imgNew, $img, 0, 0, $srcX, $srcY, $destW, $destH, $destW * $scale, $destH * $scale);
            imagejpeg($imgNew, $dest, 70);
            imagedestroy($img);
            imagedestroy($imgNew);
        }
        return $dest;
    }
    ?>

<img src="<?php echo scaleCrop('srcfolder/srcfile.jpg', 'destfolder/destfile.jpg', 320, 240, 'top'); ?>">

jquery - PHP GD crop & scale image - Stack Overflow

php jquery image crop
Rectangle 27 0

<form method="post" action="" name="account" id="account"   enctype="multipart/form-data">

php - Integrating jQuery Image Crop into Wordpress for avatar image up...

php jquery wordpress image
Rectangle 27 0

To get an equivalent of a crop, one css solution is to use overflow:hidden on an outer container of each full sized image.

<div id="thumbnail_1" style="overflow: hidden; width: 50px; height:50px"> 
  <img src="..."/>  <!-- this is the full-size image -->
</div>

<div id="thumbnail_2" style="overflow: hidden; width: 50px; height:50px"> 
  <img src="..."/>
</div>

<div id="thumbnail_3" style="overflow: hidden; width: 50px; height:50px"> 
  <img src="..."/>
</div>

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

Using Javascript/jQuery to crop image - Stack Overflow

javascript jquery
Rectangle 27 0

The Html5 Canvas element works fine with clipping regions having negative coordinates.

Example code and a Demo:

var canvas1=document.getElementById("canvas1");
        var ctx1=canvas1.getContext("2d");
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");
        var cw=canvas.width;
        var ch=canvas.height;

var x=-30;
var y=30;
var w=150;
var h=100;

var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/reef.jpg";
function start(){

canvas1.width=canvas.width=img.width;
canvas1.height=canvas.height=img.height;

    ctx1.strokeStyle='red';
    ctx1.lineWidth=2;
    ctx1.drawImage(img,0,0);
    drawRect(ctx1,x,y,w,h);
    ctx1.stroke();
  
    ctx.strokeStyle='red';
    ctx.lineWidth=2;
    drawRect(ctx,x,y,w,h);
    ctx.stroke();
    ctx.clip();
    ctx.drawImage(img,0,0);

}

function drawRect(context,x,y,w,h){
    context.beginPath();
    context.moveTo(x,y);
    context.lineTo(x+w,y);
    context.lineTo(x+w,y+h);
    context.lineTo(x,y+h);
    context.lineTo(x,y);
    context.closePath();
}
body{ background-color: ivory; }
canvas{border:1px solid red;}
<h4>Unclipped</h4>
<canvas id="canvas1" width=300 height=300></canvas><br>
<h4>Clipped with negative rectangle</h4>
<canvas id="canvas" width=300 height=300></canvas>

javascript/jQuery plugin for cropping images with negative crop bounda...

javascript jquery html5 html5-canvas
Rectangle 27 0

I am using JCrop Plugin, Check out their PHP cropping example. Basically what happens when you select are to crop, It will be saved in X,Y for co-ordinates and H,W for height and width.

Codeigniter's image_lib gives simple way to crop or resize image. Read the docs for that ..

//crop it
        $data['x'] = $this->input->post('x');
        $data['y'] = $this->input->post('y');
        $data['w'] = $this->input->post('w');
        $data['h'] = $this->input->post('h');

        $config['image_library'] = 'gd2';
        //$path =  'uploads/apache.jpg';
        $config['source_image'] = 'uploads/'.$data['user_data']['img_link']; //http://localhost/resume/uploads/apache.jpg
       // $config['create_thumb'] = TRUE;
        //$config['new_image'] = './uploads/new_image.jpg';
        $config['maintain_ratio'] = FALSE;
        $config['width']  = $data['w'];
        $config['height'] = $data['h'];
        $config['x_axis'] = $data['x'];
        $config['y_axis'] = $data['y'];

        $this->load->library('image_lib', $config); 

        if(!$this->image_lib->crop())
        {
            echo $this->image_lib->display_errors();
        }  
        redirect('profile');

Here original Uploaded image is cropped , you can also create new image. Just make create_thumb = true for that.

How To crop Image using ajax, jQuery in Codeigniter? - Stack Overflow

jquery ajax codeigniter
Rectangle 27 0

Mustafa, I'm having trouble understanding what you really need, but I understand your english is not great. That's ok. Let me try this. I think this is what you are looking for. If not, let me know and I'll delete or modify the answer.

If you want to display all your pictures at 198px but you don't want the height to distort your picture proportionality, simply chage the height:to auto.

.img_200px200px {
    float:left;
    width:198px;
    height:auto;
    margin:1px;
    overflow: hidden;
 }

You may need to update your picture container as well.

You said "like facebook". Take a look at Facebook picture layout. They have a container that restricts the max-width so that it's never wider than 470px. But the height is auto to maintain proportionality. If you set a defined height to an image you may end up stretching it or compressing it.

Also, you want the width to be in percentages instead of pixels. That way when you resize the window, it can shrink with the browser as well

thanks for reply and sorry for my english :) . If i change height:auto like height:198px image looking is not good. for example: you have 2 picture and also you create a div tag. Div width:198px; and height:198px; . All your picture in your div. first picture width: 500px; height:500px; picture looking in your div perfect. But another picture width:800px; height:400px; image not looking good in div.

It's cool man. We'll figure it out once we understand what you mean by "not looking good" what is your desired result? Can you give us a quick diagram made with Microsoft Paint or Powerpoint or something like that?

ok i will create now I'm doing a screenshot.Give me a few minutes.

jquery - css image crop resize - Stack Overflow

jquery html css image
Rectangle 27 0

Here's a tutorial on using this plugin with PHP: webmotionuk.co.uk/php-jquery-image-upload-and-crop-v11 (Disclosure: I am the author of the imgAreaSelect plugin)

How to crop an image using jquery ajax and php? - Stack Overflow

php jquery ajax image crop
Rectangle 27 0

adding some option to axzoomer (i planing to extend plugin functionality) to get current dimension and view coordinates of the image, you can do image crop by using server side option. You have already the image in the server side, so you can resize it on server by sending to server only the dimensions (for resizing) and coordinates (for then cropping) with an ajax request, and after this generate a new image in base64 string if send directly by ajax return xmlresponse or save it in a fixed file and then send on xmlresponse the url of file. In this way you will have on the fly the crop image. Another way maybe using canvas. AlbanX

php - I want to crop,rotate, skew an image using jquery with a frame a...

php javascript jquery image-manipulation dom
Rectangle 27 0

You can do it using base64, look to the website I'm working with: http://www.wordirish.com all images are manipulated on client side using HTML5 or flash for old browsers.

jquery - Javascript crop image client-side - Stack Overflow

javascript jquery image-processing
Rectangle 27 0

You need to check a few things

input name="userfile[]"
$_FILES['userfile']['name'][0],...,$_FILES['userfile']['name'][N]

2) move_uploaded_file() is a security check to ensure files are valid, dont leave home without it :-)

imagemagick

4) Lastly if all fails, use print_r($variable) to ensure the files are getting into your server.

5) Sometimes it could be system admin issue like unwritable /tmp folder, disk full, upload size limit in php.ini and web server built-in timeout. Checking phpinfo() helps too

Awesome will try this things. hopefully i can fix it now.

i can't try it now. i will try it in a few hours.

i need a better solution. it's not going to work because i'm almost finished. i just need a forloop where the jcrop plugin crops images straight after eachother when clicking on crop.

On multi file upload, does it work with ONE file? Try making it work with one file then figure out why it fails for TWO files.

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

jquery - Crop multiple images one at a time with JCrop and session in ...

php jquery html image crop