<!DOCTYPE html>

<html>

  <head>

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

    <meta charset="utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>compress pic to base64</title>

    <script type="text/javascript">

    	function uploadBtnClick(){

    		var scope = this;

    		// change pic to base64

			if(window.File && window.FileReader && window.FileList && window.Blob){

				//For Ext :

				//var filefield = me.down('filefield'),

				//	  file = filefield.fileInputEl.dom.files[0];

				var filefield = document.getElementById('fileToUpload'),

					file = filefield.files[0];

				var compressValue = document.getElementById('compressValue');

				processfile(file,compressValue,uploadCompressFile,scope);

			}else{

				alert("Upload picture is not fully supported in this browser");

			}

    	}

		function processfile(file,compressValue,uploadCompressFile,scope) {

			var reader = new FileReader();

			reader.onload = function (event) {

				var blob = new Blob([event.target.result]); 

				window.URL = window.URL || window.webkitURL;

				var blobURL = window.URL.createObjectURL(blob); 

				var image = new Image();

				image.src = blobURL;

				image.onload = function() {

					var resized = resizeMe(image);

					compressValue.value = resized;

					uploadCompressFile.apply(scope);

				}

			};

			reader.readAsArrayBuffer(file);

		}

		function resizeMe(img) {

			//压缩的大小

			var max_width =1024;

			var max_height =768; 

			var canvas = document.createElement('canvas');

			var width = img.width;

			var height = img.height;

			if(width > height) {

				if(width > max_width) {

					height = Math.round(height *= max_width / width);

					width = max_width;

				}

			}

			else{

				if(height > max_height) {

					width = Math.round(width *= max_height / height);

					height = max_height;

				}

			}

			canvas.width = width;

			canvas.height = height;

			var ctx = canvas.getContext("2d");

			ctx.drawImage(img, 0, 0, width, height);

		  	//压缩率

			return canvas.toDataURL("image/jpeg",0.7);

		}

		// call back

    	function uploadCompressFile(){

    		//do ajax upload

    		document.getElementById('displayValue').innerHTML  = document.getElementById('compressValue').value;

    	}

    </script>

  </head>

  	<body >

 	 	<input type="file" name="fileToUpload" id="fileToUpload"/> <br />

 	 	<input type="text" name="compressValue" id="compressValue" style="display:none;" /><br/>

 	  	<input type="button" onclick="uploadBtnClick()" value="上存" /><br/>

 	  	<div id='displayValue' style="word-spacing: normal;word-wrap: break-word;"></div>

  	</body>

</html>

js 实现图片压缩并转换成base64(data:image/jpeg;base64)格式的更多相关文章

  1. JS 如何将“在线图片资源”转换成“base64”

    在实现html2canvas截图的功能时,会报下面的错误: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasEle ...

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

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

  3. 使用 js 实现一个中文自动转换成拼音的工具库

    使用 js 实现一个中文自动转换成拼音的工具库 中文 => zhong-wen 应用场景 SEO 友好, URL 自动转换 blogs 发布文章,自动化部署,自动生成 url 的 path (时 ...

  4. js 前端图片压缩+ios图片角度旋转

    step1:读取选择的图片,并转为base64: function ImgToBase64 (e, fn) { // 图片方向角 //fn为传入的方法函数,在图片操作完成之后执行 var Orient ...

  5. js/vue图片压缩

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

  6. JS 实现"可读"字符串转换成"二进制的01"字符串

    问题起源 看过一个漫画, 两位程序员在办公司交流, 可是说的语言却是010101类似的字符串.周围人很是惊异.计算机的世界,确实是由01组成的.今天突然想实现这个编码转换. 解决思路 学过C语言的都知 ...

  7. js中把JSON字符串转换成JSON对象最好的方法

    在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数. 2. 使用Function对象来进行返回解析. 第一种解析方式:使用eval函数来解析,并且使用j ...

  8. caffe 图片数据的转换成lmdb和数据集均值（转）

    转自网站: http://blog.csdn.net/muyiyushan/article/details/70578077 1.准备数据 使用dog/cat数据集,在训练项目根目录下分别建立trai ...

  9. python - django 将图片路径地址转换成 InMemoryUploadedFile 并存储数据库

    # 问题场景:对接第三方时遇到一个图片存储问题,对方给的是他们服务器的图片路径地址,但是 我这里存储图片用的是 ImageField  字段属性,也设置了存储路径,现在一旦将图片显示到前端就会将设置的 ...

随机推荐

  1. xpo-4大类

      Xpo (XPBaseObject.XPLiteObject.XPCustomObject.XPObject) 类名 延后删除 是否乐观锁定 提供OID字段 XPBaseObject 不支持 支持 ...

  2. RUN vs CMD vs ENTRYPOINT - 每天5分钟玩转 Docker 容器技术（17）

    RUN.CMD 和 ENTRYPOINT 这三个 Dockerfile 指令看上去很类似,很容易混淆.本节将通过实践详细讨论它们的区别. 简单的说: RUN 执行命令并创建新的镜像层,RUN 经常用于 ...

  3. Eclipse Java 关联源码

    今天打代码的时候打算看看Java的源码是怎么实现的 没想到还没关联源码 遇到上面的情况只需要关联下源码就可以对着方法按F3查看JAVA的开源代码. 解决上面如下: 找到jdk的安装目录 找到src.z ...

  4. nodeJS中的包

    前面的话 Node组织了自身的核心模块,也使得第三方文件模块可以有序地编写和使用.但是在第三方模块中,模块与模块之间仍然是散列在各地的,相互之间不能直接引用.而在模块之外,包和NPM则是将模块联系起来 ...

  5. 五、 创建连接串连接本地数据库（ASP.NET MVC5 系列）

    1. 创建连接串连接本地SQLServer数据库 上节讲到MovieDBContext类,这个类的作用是连接数据库并将Movie对象迁移到数据库记录中.不过你会问一个问题:如何知道这个对象将连接哪个数 ...

  6. java web 数据库开发1

    一个完整的数据库部署架构通常由客户端和服务器端两部分组成.客户端封装数据库请求将其发送给服务器端,服务器端执行完毕将其及结果返回给服务器端. 以mysql为例 介绍java应用程序对数据库的访问 JD ...

  7. Java中线程总结

    本文简要介绍在 Java 世界中, 线程相关知识.主要包含 线程的创建与销毁:线程安全与同步:线程通讯:注意本文没有什么高深新知识,只缘起前段时间在翻看项目代码的时候,发现有些同学对此有诸多误解,故在 ...

  8. 源码阅读—Iterator接口和LIstIterator接口

    在继续看ArrayList源码之前,先了解Iterator接口和ListIterator接口,下篇文章详细讲解ArrayList是如何实现它们的. 我们知道,接口只是一种规范,当继承接口并实现其中的方 ...

  9. OpenGL判断一个点是否可见

    关于OpenGL中判断一个点是否可见,可以分成两种情况讨论:点在2D空间中和3D空间中的时候.并且"在2D空间中"可以看作"在3D空间中"的特殊情况. 温馨提示 ...

  10. JVM点滴

    JVM java拥有GC,为什么还会内存泄漏? 理解什么是内存泄漏: Java中的内存泄露,广义并通俗的说,就是:不再会被使用的对象的内存不能被回收,就是内存泄露. Java为了简化编程工作,对于不再 ...