JavaScript图像永久旋转

Question

我正在寻找一种在浏览器中本地旋转图像并将其存储在本地的方法 我试图用canvas和jquerryrotate旋转图像。但在启动方法中，图像仅在视图中旋转。只要我存储这些图像（例如canvas.toDataURL（）），我就会得到原始文件/旋转。 有没有办法在没有php /服务器端交互的情况下在浏览器中本地旋转图像？ THX！

$("#Img").rotate(90);
var dataURL5 = document.getElementById('Img').src; 的

- ＆GT; dataURL5 不包含旋转的图像但原始的...在浏览器中我有旋转的视图.... 或用帆布
context_tmp.translate(canvas_tmp.width , canvas_tmp.height /canvas_tmp.width );
context_tmp.rotate((Math.PI/2));
的

画布不是必需品......我只试过......

启动

Answer 1

您需要使用其toDataURL()方法从画布中提取图像。

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

注意：如果原始图像来自不同的 origin 而不是页面，则无法在CORS启动时使用（cross-origin resource sharing）。这是设计和意图。

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

示例：

/// 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对我使用的图像有效，所以它有点无意义，但无论如何 - here goes。