09/10/2018, 23:22
[Javascript] Làm sao điều khiển size của <img> nếu nó quá lớn???
Em có một vấn đề nho nhỏ như sau:
Em chèn hình ảnh vào site của mình bằng sử dụng tag <img> nhưng em muốn giới hạn kích thước hiển thị của hình ảnh đó. Chẳng hạn
Kích thước giới hạn là: 600px, 400px;
Nếu (image.width <=600) && (image.height<=400) thì hiển thị hình nguyên dạng ngược lại thì thu nhỏ lại theo tỷ lệ =(newwidth/width || newheight/height). Các anh hiểu ý em chứ?
Em đã viết hàm Javascript sử dụng đối tượng Image() nhưng vấn đề là: Khi hình ảnh chưa load xong thì không xác định kích thước được ==> quá trình kiểm tra là vô dụng. Nếu sử dụng settimeout để kiểm tra theo thời gian thì được, nhưng mà sẽ làm chậm nếu như em cho hiển thị nhiều hình một lúc, với lại cái cảm giác to nhỏ bất an lắm. Em đang tính là load tạm vào đâu đó xong rồi kiểm tra và sau đó mới hiển thị, nhưng em lại không biết viết code cho nó như thế nào?. Rất mong các anh giúp cho em cái code với. Cảm ơn nhiều.
Em chèn hình ảnh vào site của mình bằng sử dụng tag <img> nhưng em muốn giới hạn kích thước hiển thị của hình ảnh đó. Chẳng hạn
Kích thước giới hạn là: 600px, 400px;
Nếu (image.width <=600) && (image.height<=400) thì hiển thị hình nguyên dạng ngược lại thì thu nhỏ lại theo tỷ lệ =(newwidth/width || newheight/height). Các anh hiểu ý em chứ?
Em đã viết hàm Javascript sử dụng đối tượng Image() nhưng vấn đề là: Khi hình ảnh chưa load xong thì không xác định kích thước được ==> quá trình kiểm tra là vô dụng. Nếu sử dụng settimeout để kiểm tra theo thời gian thì được, nhưng mà sẽ làm chậm nếu như em cho hiển thị nhiều hình một lúc, với lại cái cảm giác to nhỏ bất an lắm. Em đang tính là load tạm vào đâu đó xong rồi kiểm tra và sau đó mới hiển thị, nhưng em lại không biết viết code cho nó như thế nào?. Rất mong các anh giúp cho em cái code với. Cảm ơn nhiều.
Bài liên quan
Nếu bạn "Thần điêu" đã gặp lỗi đó thì tốt nhát là phải viết cẩn thận width và height của image đó thôi
Và em đã nghĩ ra như sau:
Bước 1: Load hình ảnh ở cái tag img về một temp folder nào đó trên client, nhưng chưa hiển thị lên web.
Bước 2: Xác định kích thước của hình ảnh đã được load. Viết hàm kiểm tra kích thước để hiển thị. (Hoàn toàn không có thu nhỏ hình ảnh)
Bước 3: Hiển thị lên web với image location là từ temp folder chứ không phải load lại lần nữa.
EM vẫn chưa có biết viết code nó thế nào nhưng mà nếu dùng PHP hay ASP thì em nghĩ là không ổn cho lắm. Còn cái Ajax thực chất nó chỉ có kết hợp 2 ngôn ngữ là XML và javascript mà.
Rất mong các anh giúp đỡ cách để code nó.
<script language=javascript>
var saveWidth = 0;
var saveHeight = 0;
function scaleImg(what)
{
var maxWidth = 600;
var maxHeight = 400;
var ratio = 1;
what = document.getElementById(what);
if (what.width > maxWidth || what.height > maxHeight)
{
if ((maxHeight / what.height) <= (maxWidth / what.width))
{
saveWidth = what.width;
saveHeight = what.height;
ratio = what.width / what.height;
what.height = maxHeight;
what.width = maxHeight * ratio;
what.style.cursor = "pointer";
}
else
{
saveWidth = what.width;
saveHeight = what.height;
ratio = what.height / what.width;
what.height = maxWidth * ratio ;
what.width = maxWidth;
what.style.cursor = "pointer";
}
}
else if (saveWidth > maxWidth || saveHeight > maxHeight)
{
what.width = saveWidth;
what.height = saveHeight;
what.style.cursor = "pointer";
}
}
</script>
<img src="abc.jpg" id="thepic" onLoad="scaleImg('thepic')" onClick="scaleImg('thepic')">
Cho em hỏi thêm một chút:
Anh có thể cho em biết Giữa document.getElementById và document.all chúng khác nhau như thế nào không anh?
var x, obj;
if (document.layers) {
var img = getImage(myImage);
return img.width;
} else {
return getElementWidth(myImage);
}
return -1;
}
function getImageHeight(myImage) {
var y, obj;
if (document.layers) {
var img = getImage(myImage);
return img.height;
} else {
return getElementHeight(myImage);
}
return -1;
}