基于canvas的前端图片压缩
/*common*/
/**
* canvas图片压缩
* @param {[Object]} opt [配置参数]
* @param {[Function]} cbk [回调函数]
* @return {[Void]}
* example:
* var opt = {
'type' : 1,//为1为预览,建议不为1或后期进行改进
'file' : "#loadFile"//文件上传控件
},_compress = require('app/compress');
_compress(opt,function (result) {
console.log(result)
});
*/
function writeDom (opt,cbk) {
var _opt = opt,
_cbk = cbk;
$('#img,#_canvas,#img-c').remove();
$('body').append($('<canvas id="_canvas" style="display: none;"></canvas><img id="img-c" src="" style="display:none;"/><img id="img" src="" style="width:300px;"/>'));
_image = new Image();
_image.src = _opt.src || "";
$('#img-c').attr('src',_opt.src)[0].onload = function(){
var _this = $(this);
var _canvas=document.getElementById('_canvas');
_canvas.width = _this.width();
_canvas.height = _this.height();
var _context=_canvas.getContext('2d');
_context.drawImage(_image,0,0);
if (_opt.type) {$('#img').attr('src',_canvas.toDataURL('image/jpeg',_opt.scale));};
_cbk(_canvas.toDataURL('image/jpeg',_opt.scale));
};
}
var result = '';
return function(opt,cbk){
var _opt = {
'type' : opt.type || 0,
'file' : opt.file ? $(opt.file) : $("#loadFile")
},
_file = _opt.file,
_cbk = cbk || function(){};
_file.change(function(){
var file = $(this)[0].files[0];
var fReader = new FileReader();
fReader.readAsDataURL(file);
fReader.onload = function (e){
var _num = +prompt('请输入压缩比例');
if (isNaN(_num)) {_num = 1};
_opt.scale = _num;
result = _opt.src = this.result;
writeDom(_opt,_cbk);
};
});
}
奋力的成为前端的一朵奇葩。。。
基于canvas的前端图片压缩的更多相关文章
- [H5-Compress-Image]利用canvas实现 javascript 图片压缩处理_基于requirejs模块化的代码实现
// 还存在有问题的代码,问题在于processFile()中// 问题:在ipone 5c 下,某些图片压缩处理后,上传到服务器生成的文件size为0,即是空白 ;define(['mod/tool ...
- Vue directive自定义指令+canvas实现H5图片压缩上传-Base64格式
前言 最近优化项目-手机拍照图片太大,回显速度比较慢,使用了vue的自定义指令实现H5压缩上传base64格式的图片 canvas自定义指令 Vue.directive("canvas&qu ...
- js 前端图片压缩+ios图片角度旋转
step1:读取选择的图片,并转为base64: function ImgToBase64 (e, fn) { // 图片方向角 //fn为传入的方法函数,在图片操作完成之后执行 var Orient ...
- 前端图片压缩(纯js)
html代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
- 前端图片压缩上传(纯js的质量压缩,非长宽压缩)
此demo为大于1M对图片进行压缩上传 若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下: <!DOCTYPE html> <html> <head&g ...
- JavaScript前端图片压缩
实现思路 获取input的file 使用fileReader() 将图片转为base64 使用canvas读取base64 并降低分辨率 把canvas数据转成blob对象 把blob对象转file对 ...
- 基于canvas图像处理的图片展示demo
图片展示网页往往色彩繁杂,当一个网页上有多张图片的时候用户的注意力就很不容易集中,而且会造成网站整个色调风格的不可把控. 能不能把所有的预览图变成灰度图片,等用户激活某张图片的时候再上色呢? 以前,唯 ...
- 基于canvas图像处理的图片 灰色图像
图片展示网页往往色彩繁杂,当一个网页上有多张图片的时候用户的注意力就很不容易集中,而且会造成网站整个色调风格的不可把控. 能不能把所有的预览图变成灰度图片,等用户激活某张图片的时候再上色呢? 以前,唯 ...
- php canvas 前端JS压缩,获取图片二进制流数据并上传
<?php if(isset($_GET['upload']) && $_GET['upload'] == 'img'){ //二进制数据流 $data = file_get_c ...
随机推荐
- C语言中结构体的位域(bit-fields)
转自:http://blog.sina.com.cn/s/blog_6240b5980100tcba.html 有些信息在存储时,并不需要占用一个完整的字节, 而只需占几个或一个二进制位.例如在存放一 ...
- win8.1/win10 UEFI + GPT 安装(测试机型:华硕S56CM)
本教程简要介绍在UEFI 启动模式下在GPT分区表中,最简单的方法安装 Windows 10 x64 位系统.(并非傻瓜教程,安装者总要有一定的经验基础)下面先简单介绍一下UEFI和GTP. UEFI ...
- 建造者模式与原型模式/builder模式与prototype模式/创建型模式
建造者模式 定义 用于简化复杂对象的创建 JDK中的建造者模式 java.lang.StringBuilder中的append()方法,每次调用后返回修改后的对象本身. public StringBu ...
- ☆ ☆ VMware9虚拟机安装MAC OS X Mountain Lion 10.8.2详细图文教程 (转)
参考 http://diybbs.zol.com.cn/1/34037_699.html 然后对安装的Mac系统进行升级到最新版本. 安装mac系统之后,再安装VMTOOLS darwin. 方法可 ...
- jQuery.fn.extend与jQuery.extend到底区别在哪?
正文: 其实说白了,从两个方法本身就能看出来端倪. 我们先把jQuery看成了一个类,这样好理解一些. jQuery.extend(),是扩展的jQuery这个类. 假设我们把jQuery这个类看成是 ...
- javase基础笔记3——this关键字和内存图
什么是面向对象? 面向过程. 面向过程:解决一个问题的思路和方法以及步骤 面向对象:把一些具有相同特征的问题抽象成一个对象,用""""对象.方法()" ...
- View(三)
大家在平时使用View的时候都会发现它是有状态的,比如说有一个按钮,普通状态下是一种效果,但是当手指按下的时候就会变成另外一种效果,这样才会给人产生一种点击了按钮的感觉.当然了,这种效果相信几乎所有的 ...
- Liferay 6.2 改造系列之七:关闭使用条款确认、密码提醒、新用户强制修改密码等功能
关闭使用条款确认: 在/portal-master/portal-impl/src/portal.properties配置文件中,有如下配置: # # Set this to true if all ...
- Android 编程下 DP、SP 以及屏幕像素密度
有时需为视图属性指定大小尺寸值(通常以像素为单位,但有时也用点.毫米或英寸).最常见的属性有: 文字大小(Text Size),指设备上显示的文字像素高度: 边距(Margin),指定视图组件间的距离 ...
- hdu1710 二叉树的遍历
Problem Description 已知前序和中序 求后序 Input The input contains several test cases. The first line of each ...