調整JavaScript大小后獲取圖像大小
[英]Get image size after resize JavaScript
問題描述
我正在嘗試根據最大寬度/最大高度數組調整圖像的大小。 到目前為止，這是我想出的：
<html>
<head>
<title>Image resize test</title>
<script>
function createImage(){
//The max-width/max-height
var maxDim = [500,500];
//Create the image
var img = document.createElement("img");
img.setAttribute("src","http://nyrixcorp.com/images/eggplant_service.png");
document.body.appendChild(img);
//Function for resizing an image
function resize(){
//resize the image
var portrait = this.width < this.height;
this[portrait ? "height" : "width"] = maxDim[portrait ? 1 : 0];
//What is the height? PROBLEM HERE!!!
console.log(this.height);
}
//Is the image loaded already?
var temp = new Image();
temp.src = img.src;
var loaded = typeof temp.complete != "undefined" ? temp.complete : !isNaN(temp.width+temp.height) && temp.width+temp.height != 0;
//Fire the resize function
if (loaded) resize.call(img);
else img.addEventListener("load",resize,false);
}
</script>
</head>
<body onload="createImage()">
</body>
</html>
您應該能夠按原樣運行此文件。 加載圖像后可以獲取寬度/高度。 但是，一旦更改寬度，它仍然會記錄舊高度。 唯一運行正常的瀏覽器似乎是Firefox（更新版本）。 在窗口加載完成之前，所有其他瀏覽器都不會更新height屬性。
有人知道解決辦法嗎？ 圖像已加載，但未提供正確的調整大小。
3 個解決方案
解決方案1
1 2011-10-07 04:07:57
您可以嘗試設置image.style.maxWidth / image.style.maxHeight而不是設置寬度/高度，然后圖像將以保留寬高比的方式進行調整。
解決方案2
0 已采納 2011-10-07 03:51:33
您尚未更改height ，因為圖像的高度>寬度，使portrait = false ；
當您更改寬度時，在IE8中，它只會調整寬度，而在chrome中，它將同時更改寬度和高度，我認為這取決於瀏覽器。
您可以通過更改高度和手動修復此問題。
解決方案3
0 2011-10-07 04:51:53
IE無法識別addEvenetListener，因此您必須基於瀏覽器自行處理。
<html>
<head>
<title>Image resize test</title>
<script>
function createImage(){
//The max-width/max-height
var maxDim = [500,500];
//Create the image
var img = document.createElement("img");
img.setAttribute("src","http://nyrixcorp.com/images/eggplant_service.png");
document.body.appendChild(img);
//Function for resizing an image
function resize(){
//resize the image
var portrait = this.width < this.height;
this[portrait ? "height" : "width"] = maxDim[portrait ? 1 : 0];
//What is the height? PROBLEM HERE!!!
console.log(this.height);
}
//Is the image loaded already?
var temp = new Image();
temp.src = img.src;
var loaded = typeof temp.complete != "undefined" ? temp.complete : !isNaN(temp.width+temp.height) && temp.width+temp.height != 0;
//Fire the resize function
if (loaded) resize.call(img);
else{
if(isIE == true) // check here for browser
img.onload = resize;
else
img.addEventListener("load",resize,false);}
}
</script>
</head>
<body onload="createImage()">
</body>
</html>
只要您需要根據您使用的瀏覽器將true或false傳遞給isIE它就可以正常工作
如何在使用 javascript 裁剪上傳的圖像后獲取大小
[英]How to get the size after cropping of an uploaded image with javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.