我创建了一个新图片,但我试图调整它并为其添加一些转换。但是,他们没有生效。
示例: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);
}
答案 0 :(得分:4)
样式更改属性,而不是属性。要更改您需要使用的实际属性
img.height = 300;
//or by native API
img.setAttribute("height",300);
等等,您想要更改每个属性。请注意,属性是html元素的一部分,并不一定是css定义的一部分(更多内容在此处:https://www.w3.org/TR/CSS21/cascade.html#preshint)。
答案 1 :(得分:1)
尝试使用它。
document.getElementById("imageID").style.height="300px";
document.getElementById("imageID").style.width="500px";
这应该将元素的样式宽度和高度更改为您想要的样式。 在HTML脚本中,它是
<img src="source.jog" id="imageID"/>
答案 2 :(得分:1)
基于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";
在绘制图像后,它基本上会旋转画布的内容。
由于此旋转,部分图像处于画布外,因此您可能还需要缩放画布以适合旋转的图像。
答案 3 :(得分:0)
我会在画布中更改图像大小,然后通过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";