js 实现图片压缩并转换成base64(data:image/jpeg;base64)格式
<!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)格式的更多相关文章
- JS 如何将“在线图片资源”转换成“base64”
在实现html2canvas截图的功能时,会报下面的错误: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasEle ...
- 使用HTML5的两个api,前端js完成图片压缩
主要用了两个html5的 API,一个file,一个canvas,压缩主要使用cnavas做的,file是读取文件,之后把压缩好的照片放入内存,最后内存转入表单下img.src,随着表单提交. 照片是 ...
- 使用 js 实现一个中文自动转换成拼音的工具库
使用 js 实现一个中文自动转换成拼音的工具库 中文 => zhong-wen 应用场景 SEO 友好, URL 自动转换 blogs 发布文章,自动化部署,自动生成 url 的 path (时 ...
- js 前端图片压缩+ios图片角度旋转
step1:读取选择的图片,并转为base64: function ImgToBase64 (e, fn) { // 图片方向角 //fn为传入的方法函数,在图片操作完成之后执行 var Orient ...
- js/vue图片压缩
js版 新建compressImage.js,内容如下: // 将base64转换为blob(有需要可加上,没需要可不加) function convertBase64UrlToBlob(urlDat ...
- JS 实现"可读"字符串转换成"二进制的01"字符串
问题起源 看过一个漫画, 两位程序员在办公司交流, 可是说的语言却是010101类似的字符串.周围人很是惊异.计算机的世界,确实是由01组成的.今天突然想实现这个编码转换. 解决思路 学过C语言的都知 ...
- js中把JSON字符串转换成JSON对象最好的方法
在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数. 2. 使用Function对象来进行返回解析. 第一种解析方式:使用eval函数来解析,并且使用j ...
- caffe 图片数据的转换成lmdb和数据集均值(转)
转自网站: http://blog.csdn.net/muyiyushan/article/details/70578077 1.准备数据 使用dog/cat数据集,在训练项目根目录下分别建立trai ...
- python - django 将图片路径地址转换成 InMemoryUploadedFile 并存储数据库
# 问题场景:对接第三方时遇到一个图片存储问题,对方给的是他们服务器的图片路径地址,但是 我这里存储图片用的是 ImageField 字段属性,也设置了存储路径,现在一旦将图片显示到前端就会将设置的 ...
随机推荐
- ImageIO.write不好用了
今天奇怪的发现这个下面不好使了,即用ImageIO把图片写入网络流中,第一次还好使,对于同一个SocketOutputStream,第二次使用write方法就不好使了,变成了死等. 网上搜了资料搜不到 ...
- 9、JcomboBox下拉框事件监听
9.JcomboBox下拉框事件监听 JComboBox()的事件监听类ItemListener.其范例代码如下: import java.awt.*; import java.awt.event.* ...
- 使用Dockerfile构建镜像-Docker for Web Developers(5)
1.理解Dockerfile语法 语法命令 命令功能 举例 FROM 所有的dockerfile都必须以FROM命令指定镜像基于哪个基础镜像来制作 FROM ubuntu:14:04 MAINTAIN ...
- 开关调色新世界BP2888电源解决方案
LED智能方案经过几年的拼杀,已经风靡照明界.但人们渐渐发现,对照明来说,一味追求花哨的功能并不被市场所认同,而其中开关调色,以其简单易操作的特点,已逐步融入广大消费者的生活习惯中.对吸顶灯,面板灯等 ...
- Java虚拟机原理
1.编译机制 分析和输入到符号表: 词法分析:将代码转化为token序列 语法分析:由token序列生成抽象语法树 输入到符号表:将类中出现的符号输入到类的符号表 注解处理: 处理用户自定义注解,之后 ...
- TensorFlow for R
TensorFlow™ is an open source software library for numerical computation using data flow graphs. Nod ...
- Your data vis “Spidey-sense” & the need for a robust “utility belt”
@theboysmithy did a great piece on coming up with an alternate view for a timeline for an FT piece. ...
- openfire muc 移除成员
muc添加成员到数据库可参考 将Openfire中的MUC改造成类似QQ群一样的永久群 插件 插件是一位大神参考第一篇文章改进后编写的插件,进测试可以直接使用. ------------------- ...
- CentOS7使用rpm包安装MySQL
说明 本文写于2017-05-20,使用MySQL-5.7.18.操作系统为64位CentOS Linux release 7.2.1511 (Core),以桌面形式安装. 卸载MariaDB Cen ...
- Autotest添加测试用例小结
Autotest本身是一个自动化测试框架,可以在上面添加各种测试工具用于系统测试.前几天我在上面添加了几个基于龙芯桌面5.0系统的性能测试工具.现在做以下总结,大体写以下添加的过程. 以unixben ...