js 压缩图片 H5
2015-11-13 19:25
525 查看
原理 用 canvas的 toDataURI (type , int ) 如果
dataURI转 blob的代码是 copy 来的
压缩代码
/*common*/
var canvasSupported = isCanvasSupported()
function dataURItoBlob(dataURI) {
// convert base64 to raw binary data held in a string
var byteString
,mimestring
if(dataURI.split(',')[0].indexOf('base64') !== -1 ) {
byteString = atob(dataURI.split(',')[1])
} else {
byteString = decodeURI(dataURI.split(',')[1])
}
mimestring = dataURI.split(',')[0].split(':')[1].split(';')[0]
var content = new Array();
for (var i = 0; i < byteString.length; i++) {
content[i] = byteString.charCodeAt(i)
}
return new Blob([new Uint8Array(content)], {type: mimestring});
}
function imgScale (src , scale,cbk) {
if (!src) return cbk(false)
var _canvas = document.createElement('canvas')
var tImg = new Image
tImg.onload = function(){
var _context = _canvas.getContext('2d');
_context.drawImage(tImg,0,0);
var type = 'image/jpeg'
src = _canvas.toDataURL(type , scale)
var blob = dataURItoBlob(src)
cbk(blob)
/*
var r = _canvas.mozGetAsFile('f' , type)
cbk(r)
*/
};
tImg.src = src
}
function isCanvasSupported(){
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}
exports.support = canvasSupported
/* opt {scale :0-1}*/
exports.zip = function(files ,opt,cbk){
opt = opt || {}
var scale = opt.scale
if (!canvasSupported) return cbk(files)
if (!scale || 1 == scale ) return cbk(files)
var files_count = files.length
,ret = []
for (var i = 0 ,j = files.length ; i<j ; i++){
var fReader = new FileReader();
fReader.onload = function (e){
var result = e.target.result
imgScale(result , scale ,function(file){
file && ret.push(file)
files_count--
if (files_count <= 0 ) cbk && cbk(ret)
})
};
fReader.readAsDataURL(files[i]);
}
}
使用
var compress = require('app/compress')
if (compress.support){
compress.zip(files , {'scale':opt.compress} , function(files){
console.log(files)
//返回的 blob 对象可以 append 到 FormData对象上 用 ajax 上传
})
}
type参数的值为
image/jpeg或
image/webp,则第二个参数的值如果在0.0和1.0之间的话,会被看作是图片质量参数
dataURI转 blob的代码是 copy 来的
压缩代码
/*common*/
var canvasSupported = isCanvasSupported()
function dataURItoBlob(dataURI) {
// convert base64 to raw binary data held in a string
var byteString
,mimestring
if(dataURI.split(',')[0].indexOf('base64') !== -1 ) {
byteString = atob(dataURI.split(',')[1])
} else {
byteString = decodeURI(dataURI.split(',')[1])
}
mimestring = dataURI.split(',')[0].split(':')[1].split(';')[0]
var content = new Array();
for (var i = 0; i < byteString.length; i++) {
content[i] = byteString.charCodeAt(i)
}
return new Blob([new Uint8Array(content)], {type: mimestring});
}
function imgScale (src , scale,cbk) {
if (!src) return cbk(false)
var _canvas = document.createElement('canvas')
var tImg = new Image
tImg.onload = function(){
var _context = _canvas.getContext('2d');
_context.drawImage(tImg,0,0);
var type = 'image/jpeg'
src = _canvas.toDataURL(type , scale)
var blob = dataURItoBlob(src)
cbk(blob)
/*
var r = _canvas.mozGetAsFile('f' , type)
cbk(r)
*/
};
tImg.src = src
}
function isCanvasSupported(){
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}
exports.support = canvasSupported
/* opt {scale :0-1}*/
exports.zip = function(files ,opt,cbk){
opt = opt || {}
var scale = opt.scale
if (!canvasSupported) return cbk(files)
if (!scale || 1 == scale ) return cbk(files)
var files_count = files.length
,ret = []
for (var i = 0 ,j = files.length ; i<j ; i++){
var fReader = new FileReader();
fReader.onload = function (e){
var result = e.target.result
imgScale(result , scale ,function(file){
file && ret.push(file)
files_count--
if (files_count <= 0 ) cbk && cbk(ret)
})
};
fReader.readAsDataURL(files[i]);
}
}
使用
var compress = require('app/compress')
if (compress.support){
compress.zip(files , {'scale':opt.compress} , function(files){
console.log(files)
//返回的 blob 对象可以 append 到 FormData对象上 用 ajax 上传
})
}
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享
- IE8开发人员工具教程(二)
- 按右键另存图片只能存BMP
- photoshop去除图片上的水印