0

我正在寻找一种在浏览器中本地旋转图像并将其存储在本地的方法。

我试图用画布和 jQuery 旋转来旋转图像。但在引导方法中，图像仅在视图中旋转。一旦我存储了这些图像（例如 canvas.toDataURL()），我就会得到原始文件/旋转。

有没有办法在浏览器中本地旋转图像而无需 php/服务器端交互？

谢谢！

$("#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));

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

在开机

4

1 回答 1

1

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

您不能从src属性（但原始 URL）中提取任何图像数据。

注意：如果原始图像来自与页面不同的来源，则随着 CORS 的启动（跨域资源共享）将不起作用。这是设计和意图。

您需要使用其上下文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 对我正在使用的图像有效，所以它有点毫无意义，但无论如何 -就在这里。

于 2013-08-20T20:12:56.680 回答