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 原始图片 ...
随机推荐
- Reporting Service 2008 “报表服务器数据库内出错。此错误可能是因连接失败、超时或数据库中磁盘空间不足而导致的”
今天遇到了两个关于Reporting Service的问题, 出现问题的环境为Microsoft SQL Server 2008 R2 (SP2) - 10.50.4000.0 (X64) .具体情况 ...
- js实现进度条
不多说,直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 关于Inception默认配置的一个坑
本文地址:https://www.cnblogs.com/ajiangg/p/9850902.html 约半年前上线了去哪儿的开源审核工具Inception(最近发现已经闭源了.....)以及基于In ...
- python爬虫工程师各个阶段需要掌握的技能和知识介绍
本文主要介绍,想做一个python爬虫工程师,或者也可以说是,如何从零开始,从初级到高级,一步一步,需要掌握哪些知识和技能. 初级爬虫工程师: Web前端的知识:HTML, CSS, JavaScri ...
- 数据挖掘---Matplotib的学习
什么是matplotlib mat - matrix 矩阵 二维数据 - 二维图表 plot - 画图 lib - libra ...
- CSS多行文本垂直居中
今天需要将文本垂直居中,就是一行是垂直居中,多行也是垂直居中. 效果如下 实现代码(同事提供) <!DOCTYPE html> <html> <head lang=&qu ...
- JavaScript字符集
引言 JavaScript程序使用Unicode字符集编写.Unicode是ASCII和Latin-1的超集,并支持地球上几乎所有在使用的语言.ECMAScript3要求JavaScript的实现必须 ...
- 《Java大学教程》—第8章 通过继承扩展类
8.2 继承(inheritance):继承是指在类之间共享属性和方法.继承关系是一种层次关系.在继承关系中位于顶部的类称为超类(或基类),位于下面的类称为子类(或派生类).类型转换(type ...
- Zookeeper源码编译为Eclipse工程(win7下Ant编译)
前言 ZooKeeper是雅虎的.用Ant进行软件构建. 千里之行,始于足下.想看源码的第一步,是下载源码并导入某个IDE工具. Ant http://ant.apache.org/ Windows: ...
- 三、安装cmake,安装resin ,tars服务,mysql 安装介绍,安装jdk,安装maven,c++ 开发环境安装
三.安装cmake,安装resin 2018年07月01日 21:32:05 youz1976 阅读数:308 开发环境说明: centos7.2 ,最低配置:1核cpu,2G内存,1M带宽 1. ...