[ACCEPTED]-Programmatically Clip/Cut image using Javascript-image

Accepted answer
Score: 25

This can be done by enclosing your image 12 in a "viewport" div. Set a width and height 11 on the div (according to your needs), then 10 set position: relative and overflow: hidden on it. Absolutely position your 9 image inside of it and change the position 8 to change which portions are displayed.

To 7 display a 30x40 section of an image starting 6 at (10,20):

<style type="text/css">
    div.viewport {
        overflow: hidden;
        position: relative;

    img.clipped {
        display: block;
        position: absolute;

<script type="text/javascript">
    function setViewport(img, x, y, width, height) {
        img.style.left = "-" + x + "px";
        img.style.top  = "-" + y + "px";

        if (width !== undefined) {
            img.parentNode.style.width  = width  + "px";
            img.parentNode.style.height = height + "px";

    setViewport(document.getElementsByTagName("img")[0], 10, 20, 30, 40);

<div class="viewport">
    <img class="clipped" src="/images/clipped.png" alt="Clipped image"/>

The common CSS properties are 5 associated with classes so that you can 4 have multiple viewports / clipped images 3 on your page. The setViewport(…) function can be called 2 at any time to change what part of the image 1 is displayed.

Score: 2

In answer to :

Alas, JavaScript simply isn't 34 capable of extracting the properties of 33 the image you'd require to do something 32 like this. However, there may be salvation 31 in the form of the HTML element combined 30 with a bit of server-side scripting. ...

< ? (open php) 
$large_image = 'path/to/large_image';
$full_w = imagesx($large_image);
$full_h = imagesy($large_image);
(close php) ? >

This can be done in Javascript, just google a bit :

var newimage = new Image();
newimage.src = document.getElementById('background').src;
var height = newimage.height;
var width  = newimage.width;

This 29 generates a new image from an existing one 28 and captures this way in java script the 27 original height and width properties of 26 the original image (not the one id'ed as 25 background.

In answer to :

The width/height 24 properties of the document's image object 23 are read only. If you could change them, however, you 22 would only squish the frames, not cut the 21 frames up like you desire. The kind of image 20 manipulation you want can not be done with 19 client-side javascript. I suggest cutting 18 the images up on the server, or overlay 17 a div on the image to hide the parts you 16 do not wish to display.


var newimage = new Image();
newimage.src = document.getElementById('background').src;
var height = newimage.height;
var width  = newimage.width;
newimage.style.height = '200px';
newimage.style.width = '200px';
newimage.height = '200px';
newimage.width = '200px';

and if wanted 15 :


The doubled newimage.style.height and newimage.height 14 is needed in certain circumstances in order 13 to make sure that a IE will understand in 12 time that the image is resized (you are 11 going to render the thing immediately after, and 10 the internal IE processing is too slow for 9 that.)

Thanks for the above script I altered 8 and implemented on http://morethanvoice.net/m1/reader13.php (right click menu... mouseover 7 zoom lent) correct even in IE , but as you 6 will notice the on mousemove image processing 5 is too fast for the old styled IE, renders 4 the position but only once the image. In 3 any case any good idea is welcome.

Thanks 2 to all for your attention, hope that the 1 above codes can help someone...

Claudio Klemp http://morethanvoice.net/m1/reader13.php

Score: 1

CSS also defines a style for clipping. See 1 the clip property in the CSS specs.

Score: 0

The width/height properties of the document's 8 image object are read only. If you could 7 change them, however, you would only squish 6 the frames, not cut the frames up like you 5 desire. The kind of image manipulation you 4 want can not be done with client-side javascript. I 3 suggest cutting the images up on the server, or 2 overlay a div on the image to hide the parts 1 you do not wish to display.

Score: 0

What spriting does is essentially position 8 a absolutely-positioned DIV inside another 7 DIV that has overflow:hidden. You can do 6 the same, all you need to do is resize the 5 outer DIV depending on the size of each 4 frame of the larger image. You can do that 3 in code easily.

You can just set the inner 2 DIV's style:

left: (your x-position = 0 or a negative integer * frame width)px

Most JavaScript Frameworks make 1 this quite easy.

Score: 0

Alas, JavaScript simply isn't capable of 27 extracting the properties of the image you'd 26 require to do something like this. However, there 25 may be salvation in the form of the HTML 24 <canvas> element combined with a bit 23 of server-side scripting.

PHP code to go 22 about extracting the width and height of 21 the really large image:

$large_image = 'path/to/large_image';
$full_w = imagesx($large_image);
$full_h = imagesy($large_image);

From here, you'd 20 then load the image into a <canvas> element, an 19 example of which is documented here. Now, my 18 theory was that you may be able to extract 17 pixel data from a <canvas> element; assuming 16 that you can, you would simply make sure 15 to have some form of definite divider between 14 the frames of the large image and then search 13 for it within the canvas. Let's say you 12 found the divider 110 pixels from the left 11 of the image; you would then know that each 10 "frame" was 110 pixels wide, and 9 you've already got the full width stored 8 in a PHP variable, so deciphering how much 7 image you're working with would be a breeze.

The 6 only speculative aspect to this method is 5 whether or not JavaScript is capable of 4 extracting color data from a specified location 3 within an image loaded into a <canvas> element; if 2 this is possible, then what you're trying 1 to accomplish is entirely feasible.

Score: 0

I suppose you want to take a thumbnail for 3 your image. You can use ImageThumbnail.js 2 that created from prototype library in this 1 way:

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="ImageThumbnail.js"></script>
<input type="file" id="photo">
<img src="empty.gif" id="thumbnail" width="80" height="0">
<script type="text/javascript">
    new Image.Thumbnail('thumbnail', 'photo');

for more information

Score: 0

try use haxcv library haxcv js by simple 4 functions

go to https://docs.haxcv.org/Methods/cutImage to read more about his 3 library

var Pixels = _("img").cutImage (x , y , width , height  );

_("img").src (Pixels.src);

// return 2 cut image but try to include library first 1

More Related questions