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. [20190130]删除tab$记录的恢复2.txt

    [20190130]删除tab$记录的恢复2.txt --//前面链接写好了脚本,开始测试删除后的恢复.千万不要在生产系统做这样的测试!!--//参考链接:http://blog.itpub.net/ ...

  2. C#-构造函数中base

    base 是调用基类的有参数构造函数  因为在子类不能直接继承父类的构造函数   实例 using System; using System.Collections.Generic; using Sy ...

  3. Android内嵌VLC实现播放网络视频,网络音频

    1.在对应模块的build.gradle文件中,添加依赖 //VlC implementation "de.mrmaffen:vlc-android-sdk:2.0.6" 2.布局 ...

  4. Cs231n课堂内容记录-Lecture1 导论

    Lecture 1 视频网址:https://www.bilibili.com/video/av17204303/?p=2 https://zhuanlan.zhihu.com/p/21930884? ...

  5. puppet master 用 nginx + unicorn 作为前端

    目录 1. 概要 2. nginx + unicorn 配置 2.1. package 安装 2.2. 配置文件设置 2.2.1. 配置 unicorn 2.2.2. 配置nginx 2.3. 测试配 ...

  6. 【字符串】ZSC-勤奋的计算机系学生

    Description 计算机系的同学从大一就开始学习程序设计语言了.初学者总是容易写出括号不匹配的程序.至今你仍然清楚地记得,那天上机的时候你的程序编译出错,虽然你使尽了吃奶的力气也没有把错误逮着. ...

  7. python while and for

    一.while循环 1.格式: while 条件: while循环体 else: 循环正常跳出执行的语句 2.实例: index= : : break #直接跳出while ,不会执行else els ...

  8. Java面试知识点之线程篇(一)

    前言:在Java面试中,一定会遇到线程相关问题,因此笔者在这里总结Java中有关线程方面知识点,多数从网上得来(文中会贴出主要参考链接),有些也是笔者在面试中所遇到的问题,如有错误,请不吝指正.主要参 ...

  9. Linux之初识磁盘

    磁盘知识体系概括 机械硬盘和固态硬盘 机械磁盘剖开图 磁盘工作的视频动画,主轴转动,机械手读写 模拟磁盘工作视频,点击中间三角播放 磁盘结构详解 磁盘外部结构 组成 主要由三部分组成:盘片.主轴(机械 ...

  10. centos7下安装docker(18.3docker日志---logging driver---fluentd)

    前面我们学的ELK中用filebeat收集docker容器日志,利用的是dcoker默认的logging driver json-file,下面我们用fluentd来收集容器日志 Fluentd是一个 ...