/*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的前端图片压缩的更多相关文章

  1. [H5-Compress-Image]利用canvas实现 javascript 图片压缩处理_基于requirejs模块化的代码实现

    // 还存在有问题的代码,问题在于processFile()中// 问题:在ipone 5c 下,某些图片压缩处理后,上传到服务器生成的文件size为0,即是空白 ;define(['mod/tool ...

  2. Vue directive自定义指令+canvas实现H5图片压缩上传-Base64格式

    前言 最近优化项目-手机拍照图片太大,回显速度比较慢,使用了vue的自定义指令实现H5压缩上传base64格式的图片 canvas自定义指令 Vue.directive("canvas&qu ...

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

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

  4. 前端图片压缩(纯js)

    html代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  5. 前端图片压缩上传(纯js的质量压缩,非长宽压缩)

    此demo为大于1M对图片进行压缩上传 若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下: <!DOCTYPE html> <html> <head&g ...

  6. JavaScript前端图片压缩

    实现思路 获取input的file 使用fileReader() 将图片转为base64 使用canvas读取base64 并降低分辨率 把canvas数据转成blob对象 把blob对象转file对 ...

  7. 基于canvas图像处理的图片展示demo

    图片展示网页往往色彩繁杂,当一个网页上有多张图片的时候用户的注意力就很不容易集中,而且会造成网站整个色调风格的不可把控. 能不能把所有的预览图变成灰度图片,等用户激活某张图片的时候再上色呢? 以前,唯 ...

  8. 基于canvas图像处理的图片 灰色图像

    图片展示网页往往色彩繁杂,当一个网页上有多张图片的时候用户的注意力就很不容易集中,而且会造成网站整个色调风格的不可把控. 能不能把所有的预览图变成灰度图片,等用户激活某张图片的时候再上色呢? 以前,唯 ...

  9. php canvas 前端JS压缩,获取图片二进制流数据并上传

    <?php if(isset($_GET['upload']) && $_GET['upload'] == 'img'){ //二进制数据流 $data = file_get_c ...

随机推荐

  1. Android学习二_八:Animation的使用(一) (转)

    一.Animations介绍 Animations是一个实现android UI界面动画效果的API,Animations提供了一系列的动画效果,可以进行旋转.缩放.淡入淡出等,这些效果可以应用在绝大 ...

  2. MATLAB中stem函数用法

    stem(Y) 将数据序列Y从x轴到数据值按照茎状形式画出,以圆圈终止.如果Y是一个矩阵,则将其每一列按照分隔方式画出. stem(X,Y)在X的指定点处画出数据序列Y.  stem(...,'fil ...

  3. Java学习随笔2:Java复合赋值表达式的小问题

    问题:i += j只是i = i + j的简写么? 答案:非也!看下面的程序: int i = 5; long j = 8; i += j; // 可以通过编译且结果正确 i = i + j; // ...

  4. Emacs 之列编辑模式

    // */ // ]]> Emacs 之 列编辑模式 Table of Contents 1. Emacs 下列编辑模式常用命令 2. 可以参考 1 Emacs 下列编辑模式常用命令 先mark ...

  5. HTTP协议开发应用-文件服务器

    HTTP(超文本传输协议)协议是建立在TCP传输协议之上的应用层协议.HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统. 本文将重点介绍如何基于Netty的 ...

  6. 《DSP using MATLAB》 示例Example4.1

    今天开始看第4章,从开始看这本书到现在,过去一个多月,收获不少,继续坚持.

  7. http://blog.csdn.net/chenleixing/article/details/43740759

    http://blog.csdn.net/chenleixing/article/details/43740759

  8. Android应用帧率--FPS测试

    Android应用帧率FPS是衡量应用流畅度的一个非常重要的指标,可以根据FPS对应用做一些优化,那么在开发过程中如何来测试我们的应用的FPS呢? 准备工具:Eclipse + Android测试终端 ...

  9. Ubuntu Mono 运行 Helloworld

    Ubuntu Mono 运行 Helloworld ref: http://www.mono-project.com/docs/getting-started/install/linux/#usage ...

  10. ggplot2包--R可视化

    1.ggplot2发展历程 ggplot2是Hadley在爱荷华州立大学博士期间的作品,也是他博士论文的主题之一,实际上ggplot2还有个前身ggplot,但后来废弃了,某种程度上这也是Hadley ...