我写了一个上传服务器前制作缩略图的函数,请大家看看

本文介绍了一款用于图片比例缩放及限制的JavaScript工具,适用于上传图片前的预览需求,同样支持HTTP路径的图片处理。通过调整图片大小确保预览效果,同时提供了解决图片未完全加载问题的方法。
[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]

疑问:
怎么能把读入内存时出现的问题的解决方法放到函数里啊?
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值