社区
JavaScript
帖子详情
js能生成缩略图吗?对js是不是要求高了点
szjq
2006-08-16 07:02:11
我在做一个图片上传,我想在选择完图片后,用js立即显示出来(这一步已经实现),可是显示出来的图片是原图的尺寸,有时图太大,就显示的变形了,有没有办法让js生一个缩略图???
要是不行的话,用js按比例显示图片大小,就是在图的高和宽上乘以个参数,比如说*1/3,这样显示出来的图也变小了,用js怎么样取得图的宽和高,然后按比例缩小后再显示出来,这样方便上传都确定是不是要上传的图片.
谢谢大家!
...全文
565
12
打赏
收藏
js能生成缩略图吗?对js是不是要求高了点
我在做一个图片上传,我想在选择完图片后,用js立即显示出来(这一步已经实现),可是显示出来的图片是原图的尺寸,有时图太大,就显示的变形了,有没有办法让js生一个缩略图??? 要是不行的话,用js按比例显示图片大小,就是在图的高和宽上乘以个参数,比如说*1/3,这样显示出来的图也变小了,用js怎么样取得图的宽和高,然后按比例缩小后再显示出来,这样方便上传都确定是不是要上传的图片. 谢谢大家!
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
12 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
szjq
2006-08-17
打赏
举报
回复
谢谢大家,我是想在上传之前先预览一下,最好是能调整尺寸,试了一下,差不多能满足要求了
谢谢热心人
lyhuc
2006-08-17
打赏
举报
回复
用JS解决这问题纯属治标不治本,
如果是改变显示图片大小还不如直接设定个宽度行了,高度不用管
fantiny
2006-08-17
打赏
举报
回复
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Document </TITLE>
<style type="text/css">
body{
padding : 0px ;
margin : 0px;
background-color : #999999 ;
}
.DivMain {
position : absolute ;
text-align : center ;
overflow : hidden ;
}
.DivMenu {
position : absolute ;
text-align : left ;
overflow : hidden ;
}
.ImgMain {
position : absolute ;
overflow : hidden ;
border : 0px ;
}
.TBMain {
background-color : #CCCCCC ;
padding : 0px ;
border : 0px ;
z-index : 99 ;
line-height : 18px ;
}
.TBMenu {
background-color : #FFCCCC ;
padding : 0px ;
border : 0px ;
z-index : 99 ;
color: #000000 ;
}
.HrScroll {
margin : 0px;
background-color : #FFFFFF ;
padding : 0px ;
border : 0px ;
z-index : 99 ;
color : #000000 ;
border-spacing : 0px;
width : 160px ;
height : 10px ;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
var originalWidth ;
var originalHeight ;
var objDivMain ;
var objTbMain ;
var objImg ;
var ObjDrag ;
var objDivMenu ;
var objTbMemu ;
var objbtnImgInfo ;
var objDivFlag;
var objHrScroll;
var oRcts ;
var oTextRange ;
function setInit(obj) {
objDivMain = document.getElementById("divMain") ;
objTbMain = document.getElementById("TbMain") ;
objDivMenu = document.getElementById("DivMenu") ;
objTbMenu = document.getElementById("TbMenu") ;
objImg = document.getElementById("imgMain") ;
objbtnImgInfo = document.getElementById("btnImgInfo") ;
objDivFlag = document.getElementById("DivFlag");
objHrScroll = document.getElementById("HrScroll");
originalWidth = obj.width;
originalHeight = obj.height;
objImg.style.width = originalWidth;
objImg.style.height = originalHeight;
fmImgZoom.ZoomIn.disabled = false;
fmImgZoom.ZoomOut.disabled = false;
fmImgZoom.Original.disabled = false;
fmImgZoom.FitScreen.disabled = false;
fmImgZoom.btnView.disabled = false;
fmImgZoom.btnImgInfo.disabled = false;
fmImgZoom.FitScreen.click();
}
function setFitScreen() {
initImg(objImg);
}
function setOriginal() {
var intBodyWidth ;
var intBodyHeight ;
intBodyWidth = document.body.clientWidth ;
intBodyHeight = document.body.clientHeight ;
objImg.style.left = 0 ;
objImg.style.top = 0 ;
objImg.style.width = originalWidth;
objImg.style.height = originalHeight;
objImg.style.zoom = 1 ;
objDivMain.style.width = intBodyWidth ;
objDivMain.style.height = intBodyHeight - objTbMain.clientHeight;
fnWritePos(objImg.style.left,objImg.style.top,objImg.style.zoom);
}
function initImg(objCurrent) {
var intBodyWidth ;
var intBodyHeight ;
intBodyWidth = document.body.clientWidth ;
intBodyHeight = document.body.clientHeight ;
objTbMain.style.top = 0;
objTbMain.style.height = 20;
objTbMain.style.width = intBodyWidth;
objDivMain.style.left = 0 ;
objDivMain.style.height = intBodyHeight - objTbMain.clientHeight;
objDivMain.style.width = intBodyWidth ;
initZoom(objCurrent);
}
function initZoom(obj){
var intObjWidth ;
var intObjHeight ;
var intDivHeight ;
var intZoomRatio ;
intDivHeight = objDivMain.style.pixelHeight;
intObjHeight = obj.style.pixelHeight;
intZoomRatio = intDivHeight / intObjHeight;
obj.style.zoom = intZoomRatio ;
obj.style.top = 0;
obj.style.left = 0;
fnWritePos (obj.style.left,obj.style.top,obj.style.zoom) ;
}
function fnMouseDown(obj) {
ObjDrag=obj;
ObjDrag.setCapture();
ObjDrag.l=event.x-ObjDrag.style.pixelLeft;
ObjDrag.t=event.y-ObjDrag.style.pixelTop;
}
function fnMouseMove() {
if(ObjDrag!=null) {
ObjDrag.style.left = event.x-ObjDrag.l;
ObjDrag.style.top = event.y-ObjDrag.t;
fnWritePos(ObjDrag.style.left,ObjDrag.style.top,ObjDrag.style.zoom);
}
}
function fnMouseUp() {
if(ObjDrag!=null) {
ObjDrag.releaseCapture();
ObjDrag=null;
}
}
function fnZoomIn() {
objImg.style.zoom = parseFloat(objImg.style.zoom) + 0.01 ;
fnWritePos(objImg.style.left,objImg.style.top,objImg.style.zoom);
}
function fnZoomOut() {
if(objImg.style.zoom>0.01){
objImg.style.zoom = parseFloat(objImg.style.zoom) - 0.01 ;
fnWritePos(objImg.style.left,objImg.style.top,objImg.style.zoom);
}
}
function fnDivMouseDown() {
if ( event.button == 2 && event.srcElement.id != "imgMain") {
objDivMenu.style.top = event.y;
objDivMenu.style.left = event.x;
objDivMenu.style.visibility = "";
oTextRange = objHrScroll.createTextRange() ;
oRcts = oTextRange.getClientRects();
oBndRct = objDivFlag.getBoundingClientRect();
objDivFlag.style.top = oRcts[0].top;
objDivFlag.style.left = oRcts[0].left + parseInt(objImg.style.zoom * 10) ;
objDivFlag.style.visibility = "";
}
if ( event.button == 1 && event.srcElement.id != "imgMain") {
objDivMenu.style.visibility = "hidden";
objDivFlag.style.visibility = "hidden";
}
}
function fnWritePos(intLeft,intTop,intZoom) {
objbtnImgInfo.innerText = " ImgLeft:" + intLeft + " ImgTop:" + intTop + " ImgZoom:" + intZoom ;
}
function fnSlipMouseDown(obj) {
ObjDrag=obj;
ObjDrag.setCapture();
ObjDrag.l = event.x - ObjDrag.style.pixelLeft;
ObjDrag.t = ObjDrag.style.pixelTop;
}
function fnSlipMouseMove() {
if(ObjDrag!=null) {
if(event.x >= oRcts[0].left && event.x <= oRcts[0].right ){
ObjDrag.style.left = event.x - objDivFlag.offsetWidth / 2;
}
ObjDrag.t = ObjDrag.style.pixelTop;
var intCurrentPos = ObjDrag.style.pixelLeft - oRcts[0].left + objDivFlag.offsetWidth / 2;
var intPicZoom = intCurrentPos / 10;
objImg.style.zoom = intPicZoom;
fnWritePos(objImg.style.left,objImg.style.top,objImg.style.zoom);
}
}
function fnSlipMouseUp() {
if(ObjDrag!=null) {
ObjDrag.releaseCapture();
ObjDrag=null;
}
}
function setDisplay() {
if(objImg.style.visibility == ""){
objImg.style.visibility = "hidden";
}
else{
objImg.style.visibility = "";
}
}
function fnContextMenu() {
window.event.returnValue=false;
}
//-->
</SCRIPT>
</HEAD>
<BODY oncontextmenu="fnContextMenu()">
<form name="fmImgZoom">
<TABLE id="tbMain" class="TBMain">
<TR>
<TD>
<input type="button" name="ZoomIn" value="ZoomIn" onclick="fnZoomIn()" disabled>
<input type="button" name="ZoomOut" value="ZoomOut" onclick="fnZoomOut()" disabled>
<input type="button" name="Original" value="Original" onclick="setOriginal()" disabled>
<input type="button" name="FitScreen" value="FitScreen" onclick="setFitScreen()" disabled>
<input type="button" name="btnView" value="hide/view" onclick="setDisplay()" disabled>
<input id="btnImgInfo" size="50" disabled>
</TD>
</TR>
</TABLE>
<div id="divMain" class="DivMain" onmousedown="fnDivMouseDown()">
<img src="22.jpg" id="imgMain" class="imgMain" onload="setInit(this)" onmousedown="fnMouseDown(this)" onmousemove="fnMouseMove()" onmouseup="fnMouseUp()" ></div>
<div id="divMenu" class="DivMenu" style="visibility:hidden"" onmousedown="fnMouseDown(this)" onmousemove="fnMouseMove()" onmouseup="fnMouseUp()" >
<TABLE class="TBMenu">
<TR>
<TD>10%</TD>
<TD><button id="HrScroll" class="HrScroll"><hr noshade></button> </TD>
<TD>1600%</TD>
</TR>
</TABLE>
</div>
<DIV ID="DivFlag" STYLE="position:absolute;visibility:hidden;width:1px;height:10px;z-index:99" onmousedown="fnSlipMouseDown(this)" onmousemove="fnSlipMouseMove()" onmouseup="fnSlipMouseUp()" onmouseover="this.style.cursor ='hand'" onmouseout="this.style.cursor=''">↑</DIV>
</form>
</BODY>
</HTML>
deerfhqmilu
2006-08-17
打赏
举报
回复
<html>
<head>
<script language="javascript">
function showImage(){
var imgObj=new Image(); //创建一个Image对象
imgObj.src=document.form1.file1.value; //装载Image源
if(typeof(imgObj)=="object"){ //判断imgObj装载过后是否为对象,防止异常操作
var width=0;
var height=0;
width=imgObj.width/3+20;//+20是因为IE方式的默认边距
height=imgObj.height/3+20;
if(width!=0&&height!=0){
window.open(imgObj.src,"Imagehow", "toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width=" +( width )+ ",height=" +( height));
}else{
setTimeout("showImage()", 100); // 判断图片是否装载完成,只有在装载完成后才能取到宽高值
}
}else{
alert("系统错误");
}
}
</SCRIPT>
</head>
<body>
<form action="" name="form1">
<div id="img" style="display:none">预览图:<img id="viewimg"></div>
<div>上传域:<input type="file" name="file1" onchange="showImage()" /></div>
</form>
</body>
</html>
顶!
wuxinlangman
2006-08-17
打赏
举报
回复
<html>
<head>
<script language="javascript">
function showImage(){
var imgObj=new Image(); //创建一个Image对象
imgObj.src=document.form1.file1.value; //装载Image源
if(typeof(imgObj)=="object"){ //判断imgObj装载过后是否为对象,防止异常操作
var width=0;
var height=0;
width=imgObj.width/3+20;//+20是因为IE方式的默认边距
height=imgObj.height/3+20;
if(width!=0&&height!=0){
window.open(imgObj.src,"Imagehow", "toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width=" +( width )+ ",height=" +( height));
}else{
setTimeout("showImage()", 100); // 判断图片是否装载完成,只有在装载完成后才能取到宽高值
}
}else{
alert("系统错误");
}
}
</SCRIPT>
</head>
<body>
<form action="" name="form1">
<div id="img" style="display:none">预览图:<img id="viewimg"></div>
<div>上传域:<input type="file" name="file1" onchange="showImage()" /></div>
</form>
</body>
</html>
szjq
2006-08-16
打赏
举报
回复
我的原程序是这样的,大家看看怎么改成能把图片宽和高缩小的模式
<html>
<head>
<script language="javascript">
function viewimage() {
document.getElementById("img").style.display = "block";
document.form1.viewimg.src = document.form1.file1.value;
}
</SCRIPT>
</script>
</head>
<body>
<form action="" name="form1">
<div id="img" style="display:none">预览图:<img id="viewimg" ></div>
<div>上传域:<input type="file" name="file1" onchange="viewimage()" /></div>
</form>
</body>
</html>
glaciall
2006-08-16
打赏
举报
回复
呵呵,你可以先在页面中载入这个图片IMG,先让它不显示,也就是display:none;然后,在这个IMG的onload事件里加入事件处理.
你可以取得IMG的width跟height属性,这两个是它的真实属性.
然后你可以修改它的属性值得到...
另外,你也可以只指定一个width或height值,浏览器会自动的按比例缩放.
szjq
2006-08-16
打赏
举报
回复
发现上程序里的括号中文模式的
width=(imgObj.width+20; )/3//+20是因为IE方式的默认边距
height=(imgObj.height+20)/3;
这两行里都是中文模式,还有第一行中的分号放到括号里面去了
szjq
2006-08-16
打赏
举报
回复
按你的试了一下,显示不出来图片了,你看看什么原因:
<html>
<head>
<script language="javascript">
function showImage(){
var imgObj=new Image(); //创建一个Image对象
imgObj.src=document.form1.file1.value; //装载Image源
if(typeof(imgObj)=="object"){ //判断imgObj装载过后是否为对象,防止异常操作
var width=0;
var height=0;
width=(imgObj.width+20; )/3//+20是因为IE方式的默认边距
height=(imgObj.height+20)/3;
if(width!=0&&height!=0){
window.open(imgObj.src,"Imagehow", "toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width=" +( width )+ ",height=" +( height));
}else{
setTimeout("showImage()", 100); // 判断图片是否装载完成,只有在装载完成后才能取到宽高值
}
}else{
alert("系统错误");
}
}
</SCRIPT>
</script>
</head>
<body>
<form action="" name="form1">
<div id="img" style="display:none">预览图:<img id="viewimg"></div>
<div>上传域:<input type="file" name="file1" onchange="showImage()" /></div>
</form>
</body>
</html>
wuxinlangman
2006-08-16
打赏
举报
回复
注意width=(imgObj.width+20;)/3//+20是因为IE方式的默认边距
height=(imgObj.height+20)/3;
中的扩号
wuxinlangman
2006-08-16
打赏
举报
回复
function showImage(){
var imgObj=new Image(); //创建一个Image对象
imgObj.src=resource.value; //装载Image源
if(typeof(imgObj)=="object"){ //判断imgObj装载过后是否为对象,防止异常操作
var width=0;
var height=0;
width=(imgObj.width+20; )/3//+20是因为IE方式的默认边距
height=(imgObj.height+20)/3;
if(width!=0&&height!=0){
window.open(imgObj.src,"Imagehow", "toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width=" +( width )+ ",height=" +( height));
}else{
setTimeout("showImage()", 100); // 判断图片是否装载完成,只有在装载完成后才能取到宽高值
}
}else{
alert("系统错误");
}
}
</SCRIPT>
chiny
2006-08-16
打赏
举报
回复
一般在客户端js没有IO操作权限,所以无法做缩略图
我作过一个Java版本的缩略图工具,按宽高比例缩放图片。
更复杂图像操作可以使用ImageMagick
生成
网页
缩略图
(输入网址,宽度,
高
度
生成
缩略图
)
生成
网页
缩略图
,输入网址,宽度,
高
度
生成
缩略图
不过,我
生成
的是bmp,又需要自行修改。我也是拿别人的用的
JS
动态让网页
生成
的产品图片全部
生成
缩略图
网上提供的很多
JS
自动让图片
生成
缩略图
一般的只是用在静态页面上的一个图片,如果像对ASP产品页面
生成
出来的多张图片就不起作用了,有了这个代码就可以解决这个问题了,让所有读取数据库的产品图全都缩略..
微信公众号自定义分享朋友圈、发送朋友(标题、描述、
缩略图
)
讲解什么是微信公众号自定义分享朋友圈、发送朋友;普通的分享链接效果和自定义的分享效果。自定义分享朋友和发送给朋友可以设置自定义的标题、描述、
缩略图
。
asp
生成
缩略图
方法
简单,易懂的asp
生成
缩略图
的方法!
js
实现上传图片即刻
生成
缩略图
预览
越来越多的玩站需要上传图片,并同时可以看到上传的图片,这是
js
写的一段上传图片并即刻预览的代码,希望可以帮到需要的人。
JavaScript
87,917
社区成员
224,617
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章