旋转并保存JavaScript的图像 [英] Rotate and save image for JavaScript

问题描述

我在写一个webapp，它加载图像并在画布上显示（更准确地说，我正在写一个使用HTML5 / JavaScript的Tizen应用程序）。

I am writing a webapp which loads the image and display on canvas (more exact, I am writing a Tizen app which uses HTML5/JavaScript).

function loadImage(file) {
    var img = new Image();
    img.src = file;
    return img;
}

一切正常，直到我开始得到显示错误方向的图像。我想出了如何获得EXIF和方向，我想知道如何改变上述函数来返回一个合适的图像？

Everything works fine until I started to get images which display in wrong orientation. I figure out how to get the EXIF and orientation, and I was wondering how do I change the above function to return a proper image?

function loadImage(file) {
    var img = new Image();
    img.src = file;

    // Retrieve EXIF orientation (works fine)
    ...
    // What should I do here to rotate the img?

    return img;
}

我一直在环顾四周，其他人建议在画布中旋转图像，但是这会在我的计算中导致很多问题（其中x，y不是0，0，width和height与画布大小不同）。

I have been looking around and others are suggesting drawing the image rotated in canvas, but that causes a lot of problems in my calculation (where the x, y are not in 0, 0, width and height are not the same size as the canvas).

推荐答案

尝试：

img.style.transform = 'rotate(30deg)';

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