http://blog.csdn.NET/qazwsx2345/article/details/21827553

主要用了两个HTML5的 API,一个file,一个canvas,压缩主要使用cnavas做的,file是读取文件,之后把压缩好的照片放入内存,最后内存转入表单下img.src,随着表单提交。

照片是自己用单反拍的,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.min.js"></script>
<script type="text/javascript" src="js/JIC.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 = document.getElementById(id);
// console.log(filebtn);
// var files = filebtn.target.files;
// console.log(filebtn.target);
// console.log(files);
var files = evt.target.files;
for (var i = 0, f; f = files[i]; i++) { // Only process image files.
if (!f.type.match('image.*')) {
continue;
} var reader = new FileReader(); // Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
// console.log(evt.target.files[0]);
// console.log(e.target);
console.log(e.target.result);
var i = document.getElementById("test");
i.src = event.target.result;
console.log($(i).width());
console.log($(i).height());
$(i).css('width',$(i).width()/10+'px');
//$(i).css('height',$(i).height()/10+'px');
console.log($(i).width());
console.log($(i).height());
var quality = 50;
i.src = jic.compress(i,quality).src;
console.log(i.src);
i.style.display = "block";
};
})(f); // Read in the image file as a data URL.
reader.readAsDataURL(f);
}
} document.getElementById('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 = document.createElement('canvas');
//naturalWidth真实图片的宽度
cvs.width = source_img_obj.naturalWidth;
cvs.height = source_img_obj.naturalHeight;
var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0);
var newImageData = cvs.toDataURL(mime_type, quality/100);
var result_image_obj = new Image();
result_image_obj.src = newImageData;
return result_image_obj;
},
function ****(***){}
}

利用HTML5,前端js实现图片压缩的更多相关文章

  1. 使用HTML5的两个api,前端js完成图片压缩

    主要用了两个html5的 API,一个file,一个canvas,压缩主要使用cnavas做的,file是读取文件,之后把压缩好的照片放入内存,最后内存转入表单下img.src,随着表单提交. 照片是 ...

  2. 前端JS转图片为base64并压缩、调整尺寸脚本

    image to base64 to blob //////////////////////////////////////////////////////////////////////////// ...

  3. Html5+asp.net mvc 图片压缩上传

    在做图片上传时,大图片如果没有压缩直接上传时间会非常长,因为有的图片太大,传到服务器上再压缩太慢了,而且损耗流量. 思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法 ...

  4. js/vue图片压缩

    js版 新建compressImage.js,内容如下: // 将base64转换为blob(有需要可加上,没需要可不加) function convertBase64UrlToBlob(urlDat ...

  5. 利用Python进行博客图片压缩

    自己写博客的时候常常要插入一些手机拍的照片,都是几M的大小,每张手动压缩太费事了,于是根据自己博客的排版特点用Python写了一个简单的图片压缩脚本,功能是将博客图片生成缩略图,横屏的图片压缩为宽度最 ...

  6. web图片前端裁剪功能实现_利用html5 canvas技术实现图片裁剪

    用户上传头像然后截图的需求很常见,很多做法是把图像发送到后端,把裁剪后的结果发送给浏览器,这种方式会增加处理时延.最近正好学习了HTML5里的canvas,发现它的图片处理功能比较强大,就打算用can ...

  7. 利用JPEGImageEncoder进行简单的图片压缩

    import java.awt.Dimension; import java.awt.Image; import java.awt.image.BufferedImage; import java.i ...

  8. 利用HTML5和css3 选中图片上传到服务器,插件地址如下

    https://yusi123.com/3349.html 分三步,需要将js文件和css文件拷贝到项目目录下,在需要选择的图片的文件中引入,然后将HTML代码复制 <!--选择图片模块star ...

  9. js 实现图片压缩并转换成base64(data:image/jpeg;base64)格式

    <!DOCTYPE html> <html> <head> <!--by 0o晓月メ http://www.cnblogs.com/final-elysion ...

随机推荐

  1. Java进阶(三)Java安全通信:HTTPS与SSL

    通过一个系统,接触到了Java安全机制,故作一小节,供朋友们参考学习. 1. HTTPS概念 1)简介 HTTPS(全称:Hypertext Transfer Protocol over Secure ...

  2. javascript之DOM编程改变CSS样式(简易验证码显示)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. EBS 外部信用风险检查

    DECLARE l_msg_count NUMBER; l_msg_data VARCHAR2(2000); l_return_status VARCHAR2(30); l_cc_hold_comme ...

  4. Dynamics CRM2011 通过DeveloperToolkit在VS中部署遇到的问题

    接上一篇继续,说个在部署的过程中我遇到了个问题:"Error registering plugins and/or workflows. Plug-in assembly does not ...

  5. Cocos2D v2.0至v3.x简洁转换指南(四)

    实现通用的update方法 在Cocos2d 2.x你需要2个步骤去实现在每帧调用update方法: // 1) schedule update [self scheduleUpdate]; ... ...

  6. Xcode中通过删除原先版本的程序来复位App

    可以在Xcode菜单中点击 Product->Clean Build Folder (按住Option键,在windows键盘中是Alt键.) 此时Xcode将会从设备中删除(卸载uninsta ...

  7. libevent之Reactor模式

    通过前边的一篇博文轻量级网络库libevent初探,我们知道libevent实际上是封装了不同操作系统下的/dev/poll.kqueue.event ports.select.poll和epoll事 ...

  8. STL算法设计理念 - 函数适配器

    1)函数适配器的理论知识 2)常用函数函数适配器 标准库提供一组函数适配器,用来特殊化或者扩展一元和二元函数对象.常用适配器是: 1.绑定器(binder): binder通过把二元函数对象的一个实参 ...

  9. infiniDB无法建表

    infiniDB无法建表,建表报错为: 最开始报错:Constraint is not supported by InfiniDB. 这是sql语句里面有的约束,infiniDB不支持. 如 CREA ...

  10. 2016/1/9:深度剖析安卓Framebuffer设备驱动

    忙了几天,今天在公司居然没什么活干 ,所以早上就用公司的电脑写写之前在公司编写framebuffer的使用心得体会总结,这也算是一点开发经验,不过我还没写全,精华部分还是自己藏着吧.直到下午才开始有点 ...