Perché non posso modificare gli attributi CSS della mia immagine in javascript?

Question

Ho creato una nuova immagine ma sto provando a ridimensionarla e aggiungere alcune trasformazioni ad essa. Come mai, non hanno effetto.

Esempio: 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); 
} 

Answer 1

Styles cambiano proprietà, non attributi. Per modificare gli attributi effettivi, è necessario utilizzare

img.height = 300; 

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

e così via per ogni attributo che si desidera modificare. Nota che gli attributi fanno parte dell'elemento html e non fanno necessariamente parte della definizione css (altro su questo qui: https://www.w3.org/TR/CSS21/cascade.html#preshint).

Answer 2

Provare a utilizzare questo.

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

Ciò dovrebbe cambiare la larghezza e l'altezza dello stile dell'elemento in quello che si desidera. Nello script HTML, sarebbe

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

Answer 3

vorrei cambiare la dimensione dell'immagine nella tela e poi manipolare la tela attraverso 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/

Answer 4

Sulla base di this Stack Overflow answer, cambiamento il tuo JS a:

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 in pratica ruota il contenuto della tela dopo che l'immagine è stata disegnata su di essa.

Parte di questa immagine è off-canvas come risultato di questa rotazione, quindi è possibile anche ridimensionare la tela per adattarla all'immagine ruotata.

https://jsfiddle.net/Lcyksjoz/