js canvas图片压缩
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图片压缩的更多相关文章
- 使用HTML5的两个api,前端js完成图片压缩
主要用了两个html5的 API,一个file,一个canvas,压缩主要使用cnavas做的,file是读取文件,之后把压缩好的照片放入内存,最后内存转入表单下img.src,随着表单提交. 照片是 ...
- 利用HTML5,前端js实现图片压缩
http://blog.csdn.NET/qazwsx2345/article/details/21827553 主要用了两个HTML5的 API,一个file,一个canvas,压缩主要使用cnav ...
- js/vue图片压缩
js版 新建compressImage.js,内容如下: // 将base64转换为blob(有需要可加上,没需要可不加) function convertBase64UrlToBlob(urlDat ...
- canvas图片压缩,局部放大,像素处理
直接上代码:(具体看注释) 需要引用jquery.min.js <!DOCTYPE html> <html lang="en"> <head> ...
- js 前端图片压缩+ios图片角度旋转
step1:读取选择的图片,并转为base64: function ImgToBase64 (e, fn) { // 图片方向角 //fn为传入的方法函数,在图片操作完成之后执行 var Orient ...
- vue开发中vue-resource + canvas 图片压缩、上传、预览
1.使用vue-resource上传,也可以自定义ajax上传: 2.使用<input type="file" @change="submit()" na ...
- js 实现图片压缩并转换成base64(data:image/jpeg;base64)格式
<!DOCTYPE html> <html> <head> <!--by 0o晓月メ http://www.cnblogs.com/final-elysion ...
- 基于canvas的前端图片压缩
/*common*/ /** * canvas图片压缩 * @param {[Object]} opt [配置参数] * @param {[Function]} cbk [回调函数] * @retur ...
- Js利用Canvas实现图片压缩
最近做的APP项目涉及到手机拍照上传图片,因为手机拍照的图片通常都比较大,所以上传的时候就会很慢.为此,需要对图片进行压缩处理来优化上传功能.以下是具体实现: /* * 图片压缩 * img 原始图片 ...
随机推荐
- Java中线程的同步问题
在生活中我们时常会遇到同步的问题,而且大多数的实际问题都是线程的同步问题 我这里以生活中的火车售票来进行举例: 假设现在我们总共有1000张票要进行出售,共有10个出售点,那么当售票到最后只有一张票时 ...
- 洗礼灵魂,修炼python(66)--爬虫篇—BeauitifulSoup进阶之“我让你忘记那个负心汉,有我就够了”
说明一下,这个标题可能有点突兀,结合上一篇一起看就行 前面已经对BeautifulSoup有了了解了,相信你基本已经学会怎么获取网页数据了,那么BeautifulSoup这么吊,还有没有其他的功能呢? ...
- NLog简单使用
一.安装 二.安装后会在根目录出现NLog.config配置文件,简单修改配置文件为写入文件记录日志: <?xml version="1.0" encoding=" ...
- shell linux 环境下循环遍历文件夹下所有文件
demofun(){ ` do if test -f $file then echo "file: $file" elif test -d $file then echo &quo ...
- LeetCode算法题-Pascal's Triangle II(Java实现)
这是悦乐书的第171次更新,第173篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第30题(顺位题号是119).给定非负索引k,其中k≤33,返回Pascal三角形的第k ...
- LeetCode算法题-Remove Duplicates from Sorted List
这是悦乐书的第160次更新,第162篇原创 01 前情回顾 昨晚的爬楼梯算法题,有位朋友提了个思路,使用动态规划算法.介于篇幅问题,这里不细说动态规划算法,以后会在数据机构和算法的理论知识里细说. 昨 ...
- 正在学习的Java大学教程
推荐本书<Java大学教程> 看的人比较少,我也是多年不看书了,基于教程一般选国外的方法,从图书馆选了本书. 看了一半,感觉书的内容比较认真,对于基本的Java知识都算介绍全了,而且全书是 ...
- Teradata 终止回滚方法(rcvmanager工具)
1.使用root用户登录数据库节点 ssh root 2.启动database window cnsterm 3.启动rcvmanager start rcvmanager 4.确认utiltiy在哪 ...
- 贪心 C - Polycarp's New Job
Polycarp has recently got himself a new job. He now earns so much that his old wallet can't even sto ...
- win10 激活(亲测可用)
转自http://www.ylmfwin100.com/ylmf/8643.html 1.以管理员身份运行命令行(这一步一定要做) 2.依次输入以下命令 slmgr.vbs /upk (此时弹出窗口显 ...