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。

JavaScript图像永久旋转

1 个答案: