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. 搭建的flask项目,若修改项目中的文件,项目没有reload,除非重启主机,解决方法如下

    1.博主本人前面有发过一篇博文如何搭建flask项目,可以去查看. 解决办法:加入一句 touch-reload=项目目录在uwsgi.ini 2.测试没问题

  2. 如何在HTTP客户端与服务器端之间保持状态(转)

    HTTP协议与状态保持 HTTP协议本身是无状态的,这与HTTP协议本来的目的是相符的,客户端只需要简单的向服务器请求下载某些文件,无论是客户端还是服务器都没有必要纪录彼此过去的行为,每一次请求之间都 ...

  3. SQL 事务隔离级别

    转载来源:https://www.cnblogs.com/chenmh/p/3998614.html 标签: SQL SEERVER/MSSQL SERVER/SQL/事务隔离级别选项/设置数据库事务 ...

  4. BM:EOS的创造者

    2018年6月EOS的主网即将上线,EOS到底是全球骗局,还是技术创? EOS币到底能涨到几何,现在还适合不适合入手...我们暂且不说.先了解一下EOS的创造者BM,以及BM的传奇经历. BM BM是 ...

  5. 看到一个想收藏的的AJAX小列子

    用户登录的验证可以使用 form 表单提交,也可以使用 ajax 技术异步提交. AJAX 即 Asynchronous Javascript And XML(异步 JavaScript 和 XML) ...

  6. 根据flickr id 下载图片

    #coding=utf-8 import flickrapi import requests import os n=1 flickr=flickrapi.FlickrAPI('*********** ...

  7. python黑帽子

    1.TCP客户端 #AF_INET 使用标准的IPv4地址或者主机名 #SOCK_STREAM是一个客户端 import socket target_host = 'www.google.com' t ...

  8. KFCM算法的matlab程序

    KFCM算法的matlab程序 在“聚类——KFCM”这篇文章中已经介绍了KFCM算法,现在用matlab程序对iris数据库进行简单的实现,并求其准确度. 作者:凯鲁嘎吉 - 博客园 http:// ...

  9. jvisualVM的使用

    jvisualvm能干什么:监控内存泄露,跟踪垃圾回收,执行时内存.cpu分析,线程分析... jvisualvm已经被集成在jdk1.6以上的版本中(不是jre).自身运行需要最低jdk1.6版本, ...

  10. 阿里云windows server 2012 TIME_WAIT CLOSE_WAIT

    新申请的阿里云windows server 2012 R2上部署安装了socket服务器,但客户端连接后老是断开(心跳包没有),服务假死(服务不断也走),客户端申请连接会也会死在cmd下输入指令 ne ...