base64 压缩图片
//图片处理
afterimg(err, photos) {
var _this = this;
if(err && err != null && err != '') {
return ;
}
var src = 'data:image/jpeg;base64,' + photos;
var inputData = {
fileName: ["upload", '_', new Date().getTime(), '_', Math.floor(Math.random() * 1000000), '.png'].join(''), // 文件全名,包括格式
fileContent: src
};
var width = parseInt(document.documentElement.clientWidth) * 0.8;
_this.dealImage(src, {
width: width
}, inputData, _this.uploadimage);
},
//压缩图片
dealImage(path, obj, data, cb) {
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.75; // 默认图片质量为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;
}
var base64 = canvas.toDataURL('image/jpeg', quality).replace('data:image/jpeg;base64,', '');
// 回调函数返回base64的值
data.fileContent = base64;
typeof cb == 'function' && cb(data);
}
},
//上传图片
uploadimage(inputData) {}
base64 压缩图片的更多相关文章
- js压缩图片base64长度
var myCanvas=$('.img-container > img').cropper('getCroppedCanvas'); (function (base64){ var image ...
- 上传图片转为base64格式预览并压缩图片(不兼容IE9以下浏览器,兼容移动端ios,android)
前些天公司要求在微信移动端做上传图片并预览的功能,要求能够调用摄像头拍照并立即预览. 在网上搜了一些方法,开始自己写了个简单的功能实现代码.结果发现移动端拍照出来的图片动不动就2M+,又因为要批量上传 ...
- JS实现图片base64转blob对象,压缩图片,预览图片,图片旋转到正确角度
base64转blob对象 /** 将base64转换为文件对象 * @param {String} base64 base64字符串 * */ var convertBase64ToBlob = f ...
- file上传图片,base64转换、压缩图片、预览图片、将图片旋转到正确的角度
/** * 将base64转换为文件对象 * (即用文件上传输入框上传文件得到的对象) * @param {String} base64 base64字符串 */ function convertBa ...
- JS压缩图片(canvas),返回base64码
上传图片时总会遇到图片过大上传不上去的问题,本方法是在网上搜的压缩图片的例子,我测试过了,确实能用,但是照搬别人的代码,发现压缩后图片会失真,不清晰,现经修改图片清晰度还可以,不仔细看差别不大,so, ...
- vue2.X + HTML5 plus 拍照和调用设备相册 另附 图片转base64和压缩图片方法
HTML5 部分 <button @click="tesCamera()" type="button" :disabled="isshStatu ...
- Android压缩图片到100K以下并保持不失真的高效方法
前言:目前一般手机的相机都能达到800万像素,像我的Galaxy Nexus才500万像素,拍摄的照片也有1.5M左右.这么大的照片上传到服务器,不仅浪费流量,同时还浪费时间. 在开发Android企 ...
- js上传压缩图片
原文链接:http://blog.csdn.net/iefreer/article/details/53039848 手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力. 因此在某些应用下( ...
- 移动端使用localResizeIMG4压缩图片
移动h5开发避免不了上传图片,一般我们使用html自带的控件input或者使用微信上传API.但微信上传API不是任何地方都可以使用的,使用html自带的控件input上传又免不了图片体积太大,上传不 ...
随机推荐
- Error: Can't find Python executable "G:\Python27"
错误如题,node-gyp官网介绍不够详细,应设置python.exe的具体绝对路径,如下所示: npm config set python G:\Python27\python.exe
- WPF vs2015,vs2012 添加ArcObjects SDK
一:如果是vs2015,找到注册表中HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\VisualStudio\14.0\下面的这两个,并且将名称和数 ...
- ES6学习笔记<一> let const class extends super
学习参考地址1 学习参考地址2 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015:也 ...
- ES6入门声明
let.var区别点 1.let只在命令所在的代码块中有效. 2.变量一定要先声明在使用,否则会报错,不存在Es5的变量提升(暂时性死区,不存在重复使用). 3.块级作用域中存在let命令,所声明的变 ...
- QT_QSlider的总结
当鼠标选中QSlider 上时,通过点击的数值为setpageStep():通过左右方向键按钮移动的数值为setsingleStep(). 鼠标滚轮上面两者都不行,不知道是什么原因! 应用: http ...
- python中enumerate、变量类型转换
enumerate可以在遍历过程中自动生成新的一列并从0开始计数 1 a = ["hello", "world", "dlrb"] 2 fo ...
- 混合式应用真机调试(Android Studio + Chrome)
如何在chrome上调试混合式APP https://developers.google.com/web/tools/chrome-devtools/remote-debugging/ Get Sta ...
- 星号三角形 I python
'''星号三角形 I描述读入一个整数N,N是奇数,输出由星号字符组成的等边三角形,要求:第1行1个星号,第2行3个星号,第3行5个星号,依次类推,最后一行共N的星号.输入示例1:3输出示例2: * * ...
- <基础> PHP 进阶之 类(Class)
属性 类的变量成员叫做“属性”,或者叫“字段”.“特征”,在本文档统一称为“属性”.属性声明是由关键字 public,protected 或者 private 开头,然后跟一个普通的变量声明来组成.属 ...
- flash builder的配色方案
写代码的时候看着代码颜色不是特别好,于是研究了一下flash builder的配色方案. flash builder由eclipse开发,采用和eclipse相同的配置方法,这个网站上有很多配色模板: ...