扫描二维码添加客服微信
扫描二维码关注
js图片压缩插件有哪些-上传照片，并且马上能预览到缩略图，这用的是哪个js插件?
怎么用JavaScript在线压缩图片
主要用了两个html5的 API,一个file,一个canvas,压缩主要使用cnavas做的,file是读取文件,之后把压缩好的照片放入内存,最后内存转入表单下,随着表单提交。
照片是自己用单反拍的,5M多,压缩下面3张分别是600多kb,400多kb,300kb的最后那张失真度很大了,压缩效率蛮高的。
<!DOCTYPE html>
<html><head> <meta charset="utf-8"/> <title>File API Test</title> <script type="text/javascript" src="js/jquery-1.11.0."></script> <script type="text/javascript" src="js/"></script> <style> #test{ display: none; } </style></head><body><input type="file" id="fileImg" ><form> <img src="" id="test" alt=""></form><script> function handleFileSelect (evt) { // var filebtn = (id); // (filebtn); // var files = ; // (); // (files); var files = ; for (var i = 0, f; f = files[i]; i++) { // Only process image files. if (!f.('image.*')) { continue; } var reader = new FileReader(); // Closure to capture the file information. = (function(theFile) { return function(e) { // Render thumbnail. // ([0]); // (e.target); (e.); var i = ("test"); i.src = ; ($(i).width()); ($(i).height()); $(i).css('width',$(i).width()/10+'px'); //$(i).css('height',$(i).height()/10+'px'); ($(i).width()); ($(i).height()); var quality = 50; i.src = (i,quality).src; (i.src); i. = "block"; }; })(f); // Read in the image file as a data URL. (f); } } ('fileImg').addEventListener('change', handleFileSelect, false);</script></body></html>
var jic = { /** * Receives an Image Object (can be JPG OR PNG) and returns a new Image Object compressed * @param {Image} source_img_obj The source Image Object * @param {Integer} quality The output quality of Image Object * @return {Image} result_image_obj The compressed Image Object */ compress: function(source_img_obj, quality, output_format){ var mime_type = "image/jpeg"; if(output_format!=undefined && output_format=="png"){ mime_type = "image/png"; } var cvs = ('canvas'); //naturalWidth真实图片的宽度 = source_img_; = source_img_; var ctx = ("2d").drawImage(source_img_obj, 0, 0); var newImageData = (mime_type, quality/100); var result_image_obj = new Image(); result_image_ = newImageData; return result_image_obj; }, function ****(***)
上传照片，并且马上能预览到缩略图，这用的是哪个js插件?
无需插件:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
">
<html xmlns="
">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>By:DragonDean</title>
<script type="text/javascript">
//下面用于图片上传预览功能
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>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="101" align="center">
<div id="localImag"><img id="preview" src="
" width="150" height="180" style="display: block; width: 150px; height: 180px;"></div>
</td>
</tr>
<tr>
<td align="center" style="padding-top:10px;"><input type="file" name="file" id="doc" style="width:150px;" onchange="javascript:setImagePreview();"></td>
</tr>
</tbody>
</table>
</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 底部三个按钮文本
-
果盘绘画图片大全简单创作方法快速制作技巧2024-01-02 16:57:54
-
小年插画图片创作方法快速制作技巧2024-01-02 16:57:20
-
小年绘画作品制作技巧2024-01-02 16:55:45
-
小年插画图片创作方法快速制作技巧
2024-01-02 16:55:02
-
立春插画图片如何制作2024-01-02 16:54:19
-
立春插画图片创作方法快速制作技巧2024-01-02 16:53:32
