爲什麼我不能在javascript中更改圖像的CSS屬性？

我創建了一個新的圖像，但我試圖調整它的大小並添加一些轉換。如何，他們沒有生效。爲什麼我不能在javascript中更改圖像的CSS屬性？

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

來源

2016-07-06 user6432770

你需要比其它數值CSS長度值的單元'0' – dandavis

它應該是'context.drawImage（IMG，topLeftCornerHorizontalPosition，topLeftCornerVerticalPosition，imageWidth，imageHeight）;'。請參閱https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage – jkdev

至於向畫布添加旋轉圖像，可能無法使用'img.style.transform'。請參閱[旋轉並保存JavaScript的圖像]（http://stackoverflow.com/q/34080762/3345375）。 – jkdev

樣式改變性質，而不是屬性。爲了更改您需要使用的實際屬性，您需要使用

img.height = 300; 

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

等等您想更改的每個屬性。請注意，屬性是html元素的一部分，不一定是css定義的一部分（更多在這裏：https://www.w3.org/TR/CSS21/cascade.html#preshint）。

來源

2016-07-06 20:47:37

但更改樣式屬性將使樣式更改生效。 – Barmar

@Barmar - 不，不總是。 –

@Barmar：要麼工作。 OP應該使用正確的CSS（修正微小的錯字）來使用他現有的例程，但是這個答案是有效的，因爲默認的用戶代理樣式。 – dandavis

試着用這個。

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

這應該將元素的樣式寬度和高度更改爲所需。在HTML腳本，它會是

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

來源

2016-07-06 20:48:34 Dragg

@dandavis我不這樣做，但它可以改變爲圖像的ID是。 – Dragg

@TravisJ我不好。 – Dragg

如果你有圖像本身的句柄（這裏是'img'），你不需要'id'。 – jkdev

我會改變圖像大小在畫布上，然後通過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/

來源

2016-07-06 21:03:31 ApfelPresse

基於this Stack Overflow answer，改變操縱畫布您的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";

T在繪製圖像之後，他基本上旋轉畫布的內容。

由於此旋轉，圖像的一部分是非畫布的，因此您可能還需要縮放畫布以適應旋轉的圖像。

https://jsfiddle.net/Lcyksjoz/

來源

2016-07-06 21:35:31 jkdev

爲什麼我不能在javascript中更改圖像的CSS屬性？

回答

相關問題