canva旋转图片 js,JavaScript图片永久旋转

I’m looking for a way to rotate an image locally in the browser and store it locally

I tried to rotate the image with canvas and jquerryrotate. But in boot methods the image is only rotated in the view. As soon as I store these image (e.g. canvas. toDataURL()) I’m getting the original file / rotation.

Is there a way to rotate the image locally in the browser without php/server side interaction?

Thx!

$("#Img").rotate(90);

var dataURL5 = document.getElementById('Img').src;

--> dataURL5 don't contain the rotated image but the original... in the Browser i have the rotated view....

or with canvas

context_tmp.translate(canvas_tmp.width , canvas_tmp.height /canvas_tmp.width );

context_tmp.rotate((Math.PI/2));

canvas is not a requiredment... i only tried it...

in boot

解决方案

You need to extract the image from the canvas using its toDataURL() method.

You cannot extract any image data from src property (but the original URL).

Note: If the original image is from different origin than the page this won't work as CORS kicks in (cross-origin resource sharing). This is by design and intent.

You need to rotate and translate the canvas using its context, then draw the image. Now you can call toDataURL() to get the image data (image will be blank if CORS kicked in).

Example:

/// translate so rotation happens at center of image

ctx.translate(image.width * 0.5, image.height * 0.5);

/// rotate canvas context

ctx.rotate(0.5 * Math.PI); /// 90deg clock-wise

/// translate back so next draw op happens in upper left corner

ctx.translate(-image.width * 0.5, -image.height * 0.5);

/// image will now be drawn rotated

ctx.drawImage(image, 0, 0);

/// get the rotated image (unless CORS kicks in...)

var dataUri = canvas.toDataURL();

I made a fiddle with this code but as CORS is effective for the image I am using it is kind of pointless, but anyways - here goes.