[code]/**
* Created by IntelliJ IDEA.
* author: dean
* Date: 2006-8-14
* Time: 10:45:39
* description: 支持比例缩放,限制比例。
* 主要目的为在上传图片到服务器端之前进行预览。
* 当然更可用在HTTP形式路径的图片上。
* location: mapbar.com
*/
function ThumbnailTool() {
this.width = 0;
this.height = 0;
this.maxPixel = 50;
this.boolean = false;
this.src = "";
this.setMaxPixel = function (maxPixel) {
this.maxPixel = maxPixel;
}
this.isAutoMaxSize = function (bToMaxSize) {
this.bToMaxSize = bToMaxSize;
}
this.getWidth = function () {
return this.width;
}
this.getHeight = function () {
return this.height;
}
this.getSrc = function () {
return this.src;
}
this.toThumbnail = function (imgSrc) {
var img = new Image();
img.src = imgSrc;
var imgWidht = img.width;
var imgHeight = img.height;
this.src = img.src;
if (!(this.width > 0 && this.height > 0)) {
if (imgWidht >= imgHeight) {
if (imgWidht > this.maxPixel || this.bToMaxSize) {
this.height = parseInt(parseFloat(imgHeight) / parseFloat(imgWidht) * this.maxPixel + 0.5);
this.width = this.maxPixel;
} else {
this.width = imgWidht;
this.height = imgHeight;
}
} else {
if (imgHeight > this.maxPixel || this.bToMaxSize) {
this.width = parseInt(parseFloat(imgWidht) / parseFloat(imgHeight) * this.maxPixel + 0.5);
this.height = this.maxPixel;
} else {
this.width = imgWidht;
this.height = imgHeight;
}
}
}
}
}[/code]
调用方法:
[code] var tbImg = new ThumbnailTool();
//解决有时候尺寸太大的图片没有读入内存时出现的问题imgSrc 可以是本地路径也可以是http方式的路径
while(tbImg.getWidth()<2 || tbImg.getHeight()<2 ){
tbImg.setMaxPixel(50);
tbImg.toThumbnail(imgSrc);
// tbImg.isAutoMaxSize (true);
}
document.getElementById("d9").width = tbImg.getWidth();
document.getElementById("d9").height = tbImg.getHeight();
document.getElementById("d9").src = tbImg.getSrc();
document.getElementById("d9").alt = "";[/code]
疑问:
怎么能把读入内存时出现的问题的解决方法放到函数里啊?
* Created by IntelliJ IDEA.
* author: dean
* Date: 2006-8-14
* Time: 10:45:39
* description: 支持比例缩放,限制比例。
* 主要目的为在上传图片到服务器端之前进行预览。
* 当然更可用在HTTP形式路径的图片上。
* location: mapbar.com
*/
function ThumbnailTool() {
this.width = 0;
this.height = 0;
this.maxPixel = 50;
this.boolean = false;
this.src = "";
this.setMaxPixel = function (maxPixel) {
this.maxPixel = maxPixel;
}
this.isAutoMaxSize = function (bToMaxSize) {
this.bToMaxSize = bToMaxSize;
}
this.getWidth = function () {
return this.width;
}
this.getHeight = function () {
return this.height;
}
this.getSrc = function () {
return this.src;
}
this.toThumbnail = function (imgSrc) {
var img = new Image();
img.src = imgSrc;
var imgWidht = img.width;
var imgHeight = img.height;
this.src = img.src;
if (!(this.width > 0 && this.height > 0)) {
if (imgWidht >= imgHeight) {
if (imgWidht > this.maxPixel || this.bToMaxSize) {
this.height = parseInt(parseFloat(imgHeight) / parseFloat(imgWidht) * this.maxPixel + 0.5);
this.width = this.maxPixel;
} else {
this.width = imgWidht;
this.height = imgHeight;
}
} else {
if (imgHeight > this.maxPixel || this.bToMaxSize) {
this.width = parseInt(parseFloat(imgWidht) / parseFloat(imgHeight) * this.maxPixel + 0.5);
this.height = this.maxPixel;
} else {
this.width = imgWidht;
this.height = imgHeight;
}
}
}
}
}[/code]
调用方法:
[code] var tbImg = new ThumbnailTool();
//解决有时候尺寸太大的图片没有读入内存时出现的问题imgSrc 可以是本地路径也可以是http方式的路径
while(tbImg.getWidth()<2 || tbImg.getHeight()<2 ){
tbImg.setMaxPixel(50);
tbImg.toThumbnail(imgSrc);
// tbImg.isAutoMaxSize (true);
}
document.getElementById("d9").width = tbImg.getWidth();
document.getElementById("d9").height = tbImg.getHeight();
document.getElementById("d9").src = tbImg.getSrc();
document.getElementById("d9").alt = "";[/code]
疑问:
怎么能把读入内存时出现的问题的解决方法放到函数里啊?
本文介绍了一款用于图片比例缩放及限制的JavaScript工具,适用于上传图片前的预览需求,同样支持HTTP路径的图片处理。通过调整图片大小确保预览效果,同时提供了解决图片未完全加载问题的方法。
1422

被折叠的 条评论
为什么被折叠?



