1

How can one rotate only a part of an image using javascript/jquery on canvas. I have tried to rotate the image with skew and rotate, but I could not find any answer where we can rotate only some part of an image. All the functions that I have used will rotate an image completely. But, the part rotation of an image keeping the rest of it as it is has not been seen yet.

If I want to rotate only half of an image or something like that, how can I achieve it??

Also, the function shall work when the image is rotated, moved as well as resized dynamically.

Abhishek Dhanraj Shahdeo
  • 1,356
  • 2
  • 14
  • 35
  • I don't know this well enough to be authoritative, but I believe that you can get the array of bytes representing the image on the canvas and then use some math to switch them around. – Vivian River Oct 08 '15 at 19:27
  • This explains copying the canvas as an image; maybe it helps you: http://stackoverflow.com/questions/5028696/javascript-copy-canvas-state-as-image – m69's been on strike for years Oct 08 '15 at 19:33
  • There is no function to only rotate part of the image, you will have to create new image by cropping original with specific dimensions, only then you will be able to rotate your newly create cropped image. – Filix Mogilevsky Oct 08 '15 at 21:25
  • please check this http://oridomi.com/ maybe it will be usefull – Alvaro Silvino Oct 08 '15 at 22:20
  • This is not the only issue, it shall work even when the image is resized moved and rotated dynamically – Abhishek Dhanraj Shahdeo Oct 09 '15 at 04:19
  • Your question is unclear. Exactly what do you mean by "rotate only half of an image"? Will the unrotated half simply not display? If both halves display then the 2 halves may overlap -- which half will be on top? – markE Oct 09 '15 at 23:56

4 Answers4

1

Crop the image with drawImage() and draw another instance of that image that you can rotate. 

//from http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/
var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      var imageObj = new Image();

      imageObj.onload = function() {
        // draw cropped image
        var sourceX = 150;
        var sourceY = 0;
        var sourceWidth = 75;
        var sourceHeight = 150;
        var destWidth = sourceWidth;
        var destHeight = sourceHeight;
        var destX = 0;
        var destY = 0;

        context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
        drawRotated(12, imageObj, 225, sourceY, sourceWidth, sourceHeight, 75, destY, destWidth, destHeight);
      };
 imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

//from http://stackoverflow.com/a/17412387/1797161
function drawRotated(degrees, image, sx,sy,sw,sh,dx,dy,dw,dh){
    //context.clearRect(0,0,canvas.width,canvas.height);

    // save the unrotated context of the canvas so we can restore it later
    // the alternative is to untranslate & unrotate after drawing
    context.save();

    // move to the center of the canvas
    context.translate(canvas.width/2,canvas.height/2);

    // rotate the canvas to the specified degrees
    context.rotate(degrees*Math.PI/180);

    context.translate(-canvas.width/2,-canvas.height/2);
    // draw the image
    // since the context is rotated, the image will be rotated also
    context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);

    // we’re done with the rotating so restore the unrotated context
    context.restore();
}

Here's the fiddle: http://jsfiddle.net/fjhhjh4s/

Federico
  • 3,650
  • 4
  • 32
  • 45
0

If i had to make this, i'll use the same image twice: one image full, and a copy with a clipping (css clip property) that i will rotate.

See https://css-tricks.com/clipping-masking-css/

(Sorry to not using comments, i have not the level yet...)

aprovent
  • 941
  • 6
  • 20
0

It's possible, but it doesn't seem practical for your project.

You can using a perspective slicing technique:

http://www.subshell.com/en/subshell/blog/image-manipulation-html5-canvas102.html

Ideally you need to define a formula mapping to the original cartesian coordinates from the distorted coordinate system and then iterate over the destination pixel space, using the above mapping to determine the required colour for that pixel.

You would also need to interpolate neighbouring pixels to avoid the output looking "blocky".

This is non-trivial...

Alvaro Silvino
  • 9,441
  • 12
  • 52
  • 80
0

You can try OriDomi library if you are looking for crop and animate your image hear is a fiddle.

[Curl image With OriDomi][1]

[1]: https://jsfiddle.net/vipin7/jwqecvt3/17/
Vipin Sharma
  • 9
  • 5