利用HTML5,前端js实现图片压缩
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实现图片压缩的更多相关文章
- 使用HTML5的两个api,前端js完成图片压缩
主要用了两个html5的 API,一个file,一个canvas,压缩主要使用cnavas做的,file是读取文件,之后把压缩好的照片放入内存,最后内存转入表单下img.src,随着表单提交. 照片是 ...
- 前端JS转图片为base64并压缩、调整尺寸脚本
image to base64 to blob //////////////////////////////////////////////////////////////////////////// ...
- Html5+asp.net mvc 图片压缩上传
在做图片上传时,大图片如果没有压缩直接上传时间会非常长,因为有的图片太大,传到服务器上再压缩太慢了,而且损耗流量. 思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法 ...
- js/vue图片压缩
js版 新建compressImage.js,内容如下: // 将base64转换为blob(有需要可加上,没需要可不加) function convertBase64UrlToBlob(urlDat ...
- 利用Python进行博客图片压缩
自己写博客的时候常常要插入一些手机拍的照片,都是几M的大小,每张手动压缩太费事了,于是根据自己博客的排版特点用Python写了一个简单的图片压缩脚本,功能是将博客图片生成缩略图,横屏的图片压缩为宽度最 ...
- web图片前端裁剪功能实现_利用html5 canvas技术实现图片裁剪
用户上传头像然后截图的需求很常见,很多做法是把图像发送到后端,把裁剪后的结果发送给浏览器,这种方式会增加处理时延.最近正好学习了HTML5里的canvas,发现它的图片处理功能比较强大,就打算用can ...
- 利用JPEGImageEncoder进行简单的图片压缩
import java.awt.Dimension; import java.awt.Image; import java.awt.image.BufferedImage; import java.i ...
- 利用HTML5和css3 选中图片上传到服务器,插件地址如下
https://yusi123.com/3349.html 分三步,需要将js文件和css文件拷贝到项目目录下,在需要选择的图片的文件中引入,然后将HTML代码复制 <!--选择图片模块star ...
- js 实现图片压缩并转换成base64(data:image/jpeg;base64)格式
<!DOCTYPE html> <html> <head> <!--by 0o晓月メ http://www.cnblogs.com/final-elysion ...
随机推荐
- Windows Server2012R2 添加Microsoft .NET Framework 3.5 功能失败的解决方法
最近部署了一台Windows Server2012R2的虚机,在安装sharepoint foundation 2013之前安装必备的组件的时候安装到一半报错了没有安装成功,后来发现原来是系统的.NE ...
- 从JDK源码角度看线程池原理
"池"技术对我们来说是非常熟悉的一个概念,它的引入是为了在某些场景下提高系统某些关键节点性能,最典型的例子就是数据库连接池,JDBC是一种服务供应接口(SPI),具体的数据库连接实 ...
- android eclipse写layout文件失效问题解决
设置 xml 文件的代码提示功能 打开 Eclipse 依次选择 Window > Preferences > Xml > Editor > Content Assist &g ...
- Awards and Certifications @EMC
1. Awards 1.1 Jun. 12, 2012, Accurev Migration 1.2 Oct. 16, 2012, Deliver Inyo RTM to Rockies 1.3 Ju ...
- (四十八)Quartz2D引擎进阶
图形上下文栈: 应用,修改过上下文后,下一次画会在这个基础上进行,如果清空状态,需要上下文栈. 可以先把原来的上下文保存起来,然后恢复: - (void)drawRect:(CGRect)rect { ...
- struts2 令牌 实现源代码 JSP
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"% ...
- python3爬虫 - 利用浏览器cookie登录
http://blog.csdn.net/pipisorry/article/details/47980653 爬虫爬网站不免遇到需要登录的问题. 登录的时候可能还会碰到需要填验证码的问题, 有的验证 ...
- memcached /usr/local/memcached/bin/memcached: error while loading shared libraries: libevent-2.0.so.5: cannot open shared object file: No such file or directory
启动memcached的时候发现找不到libevent的库,这是memcache的默认查找路径不包含libevent的安装路径,所以要告诉memcached去哪里查找libevent. 操作命令如下: ...
- 服务端技术进阶(一)web项目的部署(发布)流程
web项目的部署(发布)流程 在myeclipse下新建web工程abc.系统设置默认如下: 项目保存位置:workspace目录\abc.Source文件夹:src,保存所有的java类文件(.ja ...
- 再回首UML之上篇
UML,统一建模语言,是一种用来对真实世界物体进行建模的标准标记,这个建模的过程是开发面向对象设计方法的第一步,UML不是一种方法学,不需要任何正式的工作产品. UML提供多种类型的模型描述图,当在某 ...