为什么我不能在JavaScript中更改我的图像的CSS属性？

Question

我创建了一个新的图像，但是我尝试调整其大小并添加一些变换效果。然而，它们没有生效。

示例：https://jsfiddle.net/chung9ey/3/

img.onload = function(){
    img.style.width = "500";
    img.style.height = "300";
    img.style.transform = "perspective(500px) rotateZ(30deg)";
    context.drawImage(img, 0 ,0);   
}

- user6432770

---

你需要一个关于数字CSS长度值的单元，除了0。 - dandavis

应该是 context.drawImage(img, topLeftCornerHorizontalPosition, topLeftCornerVerticalPosition, imageWidth, imageHeight);。请参见 https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage。 - jkdev

关于将旋转后的图片添加到画布上，可能无法使用 img.style.transform。请参阅Rotate and save image for JavaScript。 - jkdev

这里还有一种方法：在Canvas中以角度绘制图像，而不旋转Canvas。 - jkdev

基于最后一个链接，我已经写了一个 答案。 - jkdev

Answer 1

样式改变属性，而不是特性。为了改变实际的特性，你需要使用

img.height = 300;

//or by native API
img.setAttribute("height",300);

对于每个你想要更改的属性，都要这样做。请注意，属性是html元素的一部分，不一定是css定义的一部分（更多信息请参见：https://www.w3.org/TR/CSS21/cascade.html#preshint）。

- Travis J

---

但是更改样式属性将使样式更改生效。 - Barmar

@Barmar - 不，不总是这样。 - Travis J

@user6432770 - 这只是回答了如何更改图像属性的问题。也许您应该重新表达问题或创建另一个突出显示“不起作用”的问题，因为在这里很清楚地看到属性正在改变。 - Travis J

@jkdev，问题是我想添加CSS属性，如rotateX、rotateY、rotateZ和perspective，而不仅仅是在2D中旋转它。 - user6432770

@user6432770 我不确定，但我会从这里开始：https://stackoverflow.com/search?q=css+transform+canvas - jkdev

Answer 2

尝试使用这个。

document.getElementById("imageID").style.height="300px";
document.getElementById("imageID").style.width="500px";

这将改变元素的宽度和高度，使其符合您的要求。 在HTML脚本中，应为

<img src="source.jog" id="imageID"/>

- Dragg

---

@dandavis 我不知道，但可以将其更改为图像的ID。 - Dragg

@TravisJ 那是我的错。 - Dragg

如果您有图像本身的句柄（这里是“img”），则不需要使用“id”。 - jkdev

Answer 3

基于这个Stack Overflow答案，将你的JS更改为：

var img = new Image();
var canvas = document.getElementById("hello");
var context = canvas.getContext("2d");

img.onload = function(){
  context.save(); // Saves current canvas state (includes transformations)
  context.rotate(30); // This rotates canvas context around its top left corner...
  context.translate(-275, 125); // ...so you need to make a correction.
  context.drawImage(img, 0, 0, 500, 300);   
  context.restore(); // Restore canvas state
};

img.src = "https://www.enterprise.com/content/dam/global-vehicle-images/cars/CHRY_200_2015.png";

这基本上是在绘制图像后旋转画布内容。

由于旋转，部分图像超出了画布范围，因此您可能还想缩放画布以适应旋转后的图像。

https://jsfiddle.net/Lcyksjoz/

- jkdev

Answer 4

我会在画布中更改图像大小，然后通过ID操纵画布。

var img = new Image(100, 100);
var canvas = document.getElementById("hello");
var context = canvas.getContext("2d");

var width = 500;
var height = 300;
img.onload = function(){
    img.style.transform = "perspective(200px) rotateZ(30deg)";
    context.drawImage(img, 0 ,0, width,height); 
}

img.src = "https://www.enterprise.com/content/dam/global-vehicle-images/cars/CHRY_200_2015.png";

document.getElementById("hello").style.width="300px";

https://jsfiddle.net/chung9ey/27/

- Kev