JavaScript图片永久旋转 [英] JavaScript image rotate permanently

问题描述

我正在寻找一种方法在浏览器中本地旋转图像并将其存储在本地
我试图用canvas和jqueryrotate旋转图像。但在引导方法中，图像只在视图中旋转。一旦我存储这些图像（例如canvas。toDataURL（））我得到原始文件/旋转。
有没有办法在浏览器中本地旋转图像没有php /服务器端交互？
Thx！

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 不包含旋转的图片，而是原始的...在浏览器中，我有旋转的视图... 。
或用画布


context_tmp.translate（canvas_tmp.width，canvas_tmp.height /canvas_tmp.width）;

context_tmp.rotate（（Math.PI / 2））;

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

在启动

推荐答案

您需要使用 toDataURL（） 方法。

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

无法从 src 属性（但是原始网址）中提取任何图片数据。

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

注意：如果原始图片来自不同的来源比该网页，这将无法正常工作，CORS踢（跨来源资源共享）。这是由设计和意图。

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.

您需要 rotate 和 translate 画布使用其上下文，然后绘制图像。现在，您可以调用 toDataURL（）获取图像数据（如果CORS踢，则图像将为空白）。

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();

我使用这个代码，但CORS对图像有效我使用它是无意义，但反正 - 这里 。

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.

这篇关于JavaScript图片永久旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！