使用 JavaScript 更改图像大小

Question

我正在尝试使用 JavaScript 更改图像的大小。 jS 文件与 HTML 页面是分开的。

我想在 JS 文件中设置图片的高度和宽度。有什么好的方法吗？

Answer 1

一旦你引用了你的图片，你可以像这样设置它的高度和宽度：

var yourImg = document.getElementById('yourImgId');
if(yourImg && yourImg.style) {
    yourImg.style.height = '100px';
    yourImg.style.width = '200px';
}

在 html 中，它看起来像这样：

<img src="src/to/your/img.jpg" id="yourImgId" alt="alt tags are key!"/>

Answer 2

您可以像这样更改实际的宽度/高度属性：

var theImg = document.getElementById('theImgId');
theImg.height = 150;
theImg.width = 150;

Answer 3

如果要在加载后调整图像大小，可以附加到<img> 标记的onload 事件。请注意，并非所有浏览器都支持它（Microsoft's reference 声称它是 HTML 4.0 规范的一部分，但HTML 4.0 spec 没有列出onload 事件<img>）。

以下代码经过测试并在以下环境中运行：IE 6、7 和 8、Firefox 2、3 和 3.5、Opera 9 和 10、Safari 3 和 4 以及 Google Chrome：

<img src="yourImage.jpg" border="0" height="real_height" width="real_width"
    onload="resizeImg(this, 200, 100);">

<script type="text/javascript">
function resizeImg(img, height, width) {
    img.height = height;
    img.width = width;
}
</script>

Answer 4

更改图像很容易，但是更改后如何将其更改回原始大小？您可以尝试将文档中的所有图像更改回原始大小：

var i,L=document.images.length; for(i=0;i

Answer 5

you can see the result here 在这些简单的代码块中，您可以更改图像的大小，并在鼠标进入图像时使其变大，当鼠标离开时它会恢复到原来的大小。

html：

<div>
<img  onmouseover="fifo()" onmouseleave="fifo()" src="your_image"   
       width="10%"  id="f" >
</div>

js文件：

var b=0;
function fifo() {
       if(b==0){
            document.getElementById("f").width = "300";
           b=1;
          }
       else
          {
         document.getElementById("f").width = "100";
          b=0;
        }
   }

Answer 6

直接操作

图片的HTML标签声明：

<img id="my-img" src="src/to/your/image.jpg" width="1280px" height="720px" />
<!-- OR -->
<img id="my-img" src="src/to/your/image.jpg" style="width: 1280px; height: 720px;" />

通过直接访问对象图像处理html标签：

const myImg = document.getElementById("my-img");

// Set a new width and height
myImg.style.width = "800px";
myImg.style.height = "450px";
// Or set a new width and height by attribute
// This option is not advisable because the attribute has a 
// low priority over the style property.
myImg.setAttribute("width", 800);
myImg.setAttribute("height", 450);

操作函数

使用下面的updateImageSizeWithWidth 或updateImageSizeWithHeight 方法，您可以增加或减少任何图像，而无需明确指定确切的宽度和高度，您只需要这两个值中的一个值即可更新图像大小。

/**
 * Update image size using width
 *
 * param {HTMLImageElement} img
 * param {number} newWidth
 */function updateImageSizeWithWidth(img, newWidth) {
  // Getting the width and height of the current image 
  const oldWidth =  Number.parseFloat(getComputedStyle(img).width || img.getAttribute("width"));
  const oldHeight = Number.parseFloat(getComputedStyle(img).height || img.getAttribute("height"));
  // Getting proportional height with new width
  const newHeight = (newWidth * oldHeight)/oldWidth;
  // Setting dimensions in the image
  img.style.width = `${newWidth}px`;
  img.style.height = `${newHeight}px`;
}

/**
 * Update image size using height
 *
 * param {HTMLImageElement} img
 * param {number} newHeight
 */
function updateImageSizeWithHeight(img, newHeight) {
  // Getting the width and height of the current image 
  const oldWidth =  Number.parseFloat(getComputedStyle(img).width || img.getAttribute("width"));
  const oldHeight = Number.parseFloat(getComputedStyle(img).height || img.getAttribute("height"));
  // Getting proportional height with new width
  const newWidth = (newHeight * oldWidth)/oldHeight;
  // Setting dimensions in the image
  img.style.width = `${newWidth}px`;
  img.style.height = `${newHeight}px`;
}

updateImageSizeWithWidth(myImg, 800);
// Or
updateImageSizeWithHeight(myImg, 450);

Answer 7

//  This one has print statement so you can see the result at every stage if     you would like.  They are not needed

function crop(image, width, height)
{
    image.width = width;
    image.height = height;
    //print ("in function", image, image.getWidth(), image.getHeight());
    return image;
}

var image = new SimpleImage("name of your image here");
//print ("original", image, image.getWidth(), image.getHeight());
//crop(image,200,300);
print ("final", image, image.getWidth(), image.getHeight());

Answer 8

你可以这样做：

• .html 文件：

<img src="src/to/your/img.jpg" id="yourImgId"/>

• .js 文件：

document.getElementById("yourImgId").style.height = "heightpx";

你可以对宽度做同样的事情。