旋转javascript图像

Question

我想在javascript中旋转图像。 在javascript中用于图像的变量是heroImage。 我正在使用jquery旋转，只有在html中旋转图像时它才能正常工作，但在javascript中则不行。 通常它看起来像这样

    $("#image").rotate(angle);

但这仅适用于以html创建的图像。

这是目前使用

的代码的一部分

var heroImage = new Image();
heroImage.src = "images/hero.png";

它画的画布，如果有帮助的话。 问题是#image只能引用一个html div元素afaik。

Answer 1

如果heroImage变量是包含文件名的字符串，只需创建一个新图像并在调用rotate()之前将其附加到DOM，f.ex：

var heroImage = 'one.jpg';
var image = new Image();
image.src = heroImage;
$('#image').append(image).rotate(angle);

修改 如果#image元素应该是IMG本身，请尝试类似：

var heroImage = 'one.jpg';
var image = new Image();
image.src = heroImage;
document.body.appendChild(image); // or wherever you want to put it
$(image).rotate(angle);