Canvas 方向显示不当

Question

由于 EXIF 元数据的原因，我收到一些需要翻转的图像。我使用 image-orientation: from-image 来修复 img 标签。 canvas 标签的等价物是什么。

Answer 1

CSS image-orientation 没有得到很好的支持，MDN 文档说它可能会被弃用。如果您知道所有图像都已旋转（沿相同方向），您可以：

a.) 在 GIMP 等图像编辑器中打开图像并保存（GIMP 将覆盖旋转数据，首先向您发出警告）。

b.) 使用 CSS transform 属性:

CSS


.my-images-selector {

  /* 90deg or 270deg depending on the rotation */
  -ms-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

如果要在整个 canvas 上绘制图像，您只需将上面的 CSS 应用到 canvas 元素即可。

c.) 要在 canvas 内绘制旋转图像，请使用 canvas 上下文 transform 方法（您可以参考此处：HTML5 Canvas Rotate Image）

另外，参见 JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images

Canvas 方向显示不当

Canvas Orientation Displaying Impropely

javascript

css

orientation

html5-canvas