js图片压缩插件-上传照片，并且马上能预览到缩略图，这用的是哪个js插件?

原创：找图网 2023-04-14 04:38:15

怎么用js实现图片的缩小？

一般来说,实现图片的放大缩小功能都用到了比较大的封装插件,特别是以jQuery插件居多,而实际上单纯实现对原图本身的放大缩小,用简单几行原生JS代码就可以做到。在今天分享的这个实例中,点击放大按钮不松鼠标,图片会不断的逐渐放大,当然也可以点一下放大一点,点击缩小按钮则反之,有需要的朋友可以考虑收藏备用哦

以下为全部代码:

<html>

<head>

<title>javascript控制图片缩小或者放大</title>

</head>

<body>

var oTime;

function changeSize(id,action){

var obj=(id);

=parseInt()+(action=='+'?+10:-10)+'%';

oTime=('changeSize(\''+id+'\',\''+action+'\')',100);

}

=function(){

(oTime);

}

</script>

<img id="headImg" src="

</body>

</html>

Html5移动端上传图片并裁剪 -

插件可以为移动端

(仅支持移动端)

提供头像上传并裁剪成指定尺寸,用原生js开发的,轻量级,包含html跟css,不到8kb。点此链接体验:

参数说明

width:Number (默认:500) C 裁剪宽度

height:Number (默认:500) C 裁剪高度

ratio:Number (可选) C 裁剪的比例,当传入ratio时width/height将无效

src:String (必传) C 需要裁剪的图片,可以是图片链接,或者 base64

type:String (默认:jpeg) C 裁剪后图片的类型,仅支持 jpeg/png 两种

quality:Number (默认:0.9) C 压缩质量

buttonText:Array (默认:[‘取消’, ‘重置’, ‘完成’]) C 底部三个按钮文本

上传照片，并且马上能预览到缩略图，这用的是哪个js插件?

'>上传照片,并且马上能预览到缩略图,这用的是哪个js插件?myjiaziimg

无需插件:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns="

<head>

<title>By:DragonDean</title>

//下面用于图片上传预览功能

function setImagePreview(avalue) {

var docObj=("doc");

var imgObjPreview=("preview");

if( &&[0])

{

//火狐下,直接设img属性

= 'block';

= '150px';

= '180px';

// = [0].getAsDataURL();

//火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式

= ([0]);

}

else

{

//IE下,使用滤镜

();

var imgSrc = ().text;

var localImagId = ("localImag");

//必须设置初始大小

= "150px";

= "180px";

//图片异常的捕捉,防止用户修改后缀来伪造图片

try{

="progid:(sizingMethod=scale)";

("").src = imgSrc;

}

catch(e)

{

alert("您上传的图片格式不正确,请重新选择!");

return false;

}

= 'none';

();

}

return true;

}

</script>

</head>

<body>

<tbody>

<tr>

<div id="localImag"><img id="preview" src="

" width="150" height="180" style="display: block; width: 150px; height: 180px;"></div>

</td>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>