function preview_picture(pic){
var r=new FileReader();
r.readAsDataURL(pic);
r.onload=function(e){
dealImage(this.result,{width:600},function(data){
picture=data
$('#pic-box').attr("src",data);
});
}
} function dealImage(path, obj, callback){
var img = new Image();
img.src = path;
img.onload = function(){
var that = this;
// 默认按比例压缩
var w = that.width,
h = that.height,
scale = w / h;
w = obj.width || w;
h = obj.height || (w / scale);
var quality = 0.7; // 默认图片质量为0.7
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 创建属性节点
var anw = document.createAttribute("width");
anw.nodeValue = w;
var anh = document.createAttribute("height");
anh.nodeValue = h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh);
ctx.drawImage(that, 0, 0, w, h);
// // 图像质量
if(obj.quality && obj.quality <= 1 && obj.quality > 0){
quality = obj.quality;
}
// // quality值越小,所绘制出的图像越模糊
var base64 = canvas.toDataURL('image/jpeg', quality );
// // 回调函数返回base64的值
callback(base64);
}
}

js canvas图片压缩的更多相关文章

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

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

  2. 利用HTML5,前端js实现图片压缩

    http://blog.csdn.NET/qazwsx2345/article/details/21827553 主要用了两个HTML5的 API,一个file,一个canvas,压缩主要使用cnav ...

  3. js/vue图片压缩

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

  4. canvas图片压缩,局部放大,像素处理

    直接上代码:(具体看注释) 需要引用jquery.min.js <!DOCTYPE html> <html lang="en"> <head> ...

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

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

  6. vue开发中vue-resource + canvas 图片压缩、上传、预览

    1.使用vue-resource上传,也可以自定义ajax上传: 2.使用<input type="file" @change="submit()" na ...

  7. js 实现图片压缩并转换成base64(data:image/jpeg;base64)格式

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

  8. 基于canvas的前端图片压缩

    /*common*/ /** * canvas图片压缩 * @param {[Object]} opt [配置参数] * @param {[Function]} cbk [回调函数] * @retur ...

  9. Js利用Canvas实现图片压缩

    最近做的APP项目涉及到手机拍照上传图片,因为手机拍照的图片通常都比较大,所以上传的时候就会很慢.为此,需要对图片进行压缩处理来优化上传功能.以下是具体实现: /* * 图片压缩 * img 原始图片 ...

随机推荐

  1. WEB 前端开发插件整理

    下拉框插件 1.select http://select2.github.io/ 2.双 select http://loudev.com 3.selectbox http://aui.github. ...

  2. Linux下对lvm逻辑卷分区大小的调整(针对xfs和ext4不同文件系统)

    当我们在安装系统的时候,由于没有合理分配分区空间,在后续维护过程中,发现有些分区空间不够使用,而有的分区空间却有很多剩余空间.如果这些分区在装系统的时候使用了lvm(前提是这些分区要是lvm逻辑卷分区 ...

  3. SQL SERVER 查询哪些存储使用了该表

    SELECT obj.Name 存储过程名, sc.TEXT 存储过程内容 FROM syscomments sc INNER JOIN sysobjects obj ON sc.Id = obj.I ...

  4. MySQL open_tables和opened_tables

    官网解释参见:https://dev.mysql.com/doc/refman/5.7/en/table-cache.html 其他可供参考的文章有: 关于表限制参数的使用:https://dba.s ...

  5. Linux用户抢占和内核抢占详解(概念, 实现和触发时机)--Linux进程的管理与调度(二十)

    1 非抢占式和可抢占式内核 为了简化问题,我使用嵌入式实时系统uC/OS作为例子 首先要指出的是,uC/OS只有内核态,没有用户态,这和Linux不一样 多任务系统中, 内核负责管理各个任务, 或者说 ...

  6. strlen strcat strcpy strcmp 自己实现

    strlen strcat strcpy strcmp 自己实现 strlen include <stdio.h> #include <string.h> #include & ...

  7. Syntax error, parameterized types are only available if source level is 1.5 解决方案

    在网上找了一个K-means算法的程序,打开,运行,出现了Syntax error,parameterized types are only available if source level is ...

  8. 【Teradata SQL】使用SQL将多个逗号分隔改为一个逗号分隔

    1.问题说明: //将如下字符串改为一个逗号分隔 张三,李四,王五,,,,,,六,,,,其,,,,,,,,,,,把 ==> 张三,李四,王五,六,其,把 2.解决方法 sel oreplace( ...

  9. 解决Go依赖包安装问题

    最近在学习Go编写后端服务,先放出谢大的书镇楼: https://github.com/astaxie/build-web-application-with-golang/blob/master/zh ...

  10. 面试总结——JVM篇

    前言:该篇主要对Java虚拟机相关的题目进行介绍. JVM篇 基本上在面试的时候,都会或多或少的涉及JVM,主要看面试官的侧重点,笔者在面试过程中,是通过volatile问题,引导了JVM相关问题上的 ...