js 压缩图片 H5
原理 用 canvas的 toDataURI (type , int ) 如果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(',')[].indexOf('base64') !== - ) {
byteString = atob(dataURI.split(',')[])
} else {
byteString = decodeURI(dataURI.split(',')[])
} mimestring = dataURI.split(',')[].split(':')[].split(';')[] var content = new Array();
for (var i = ; 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,,);
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 || == scale ) return cbk(files)
var files_count = files.length
,ret = [] for (var i = ,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 <= ) 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 上传
})
}
js 压缩图片 H5的更多相关文章
- js压缩图片base64长度
var myCanvas=$('.img-container > img').cropper('getCroppedCanvas'); (function (base64){ var image ...
- JS压缩图片(canvas),返回base64码
上传图片时总会遇到图片过大上传不上去的问题,本方法是在网上搜的压缩图片的例子,我测试过了,确实能用,但是照搬别人的代码,发现压缩后图片会失真,不清晰,现经修改图片清晰度还可以,不仔细看差别不大,so, ...
- js 压缩图片(只缩小体积,不更改图片尺寸)
1.情景展示 如上图所示,点击上传图片按钮,调用手机摄像头拍照功能. <input onchange="javascript:imgFun.uploadPicture();&quo ...
- js 压缩图片 上传
感谢,参考了以下作者的绝大部分内容 https://blog.csdn.net/tangxiujiang/article/details/78755292 https://blog.csdn.net/ ...
- 了解JS压缩图片,这一篇就够了
前言 公司的移动端业务需要在用户上传图片是由前端压缩图片大小,再上传到服务器,这样可以减少移动端上行流量,减少用户上传等待时长,优化用户体验. 插播一下,本文案例已整理成插件,已上传npm ,可通过 ...
- base64之js压缩图片
在日常的一些项目中会有上传图片之类的接口,如果图片过大了再上传的时候是非常的耗时以及占用资源,在这里就给大家分享一下如何在js中把大的图片压缩成小的图片,我这里的功能是用户点击按钮调用相机或者选择文件 ...
- js压缩图片上传插件localResizeIMG
示例 /** * 本地图片压缩后上传 */ $("#vfile").change(function(){ var _this = $(this); lrz(this.files[0 ...
- js压缩图片并上传,不失真,保证图片清晰度
<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...
- html5+js压缩图片上传
最近在折腾移动站的开发,涉及到了一个手机里面上传图片.于是经过N久的折腾,找到一个插件,用法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...
随机推荐
- 异构关系数据库(Sqlserver与MySql)之间的数据类型转换参考
一.SqlServer到MySql的数据类型的转变 编号 SqlServer ToMySql MySql 1 binary(50) LONGBLOB binary 2 bit CHAR(1) bit ...
- java源码之List(ArrayList,LinkList,Vertor)
1,List概括 List的框架图 (01) List 是一个接口,它继承于Collection的接口.它代表着有序的队列. (02) AbstractList 是一个抽象类,它继承于Abstract ...
- MySQL事件调度器Event Scheduler
我们都知道windows的计划任务和linux的crontab都是用来实现一些周期性的任务和固定时间须要运行的任务. 在mysql5.1之前我们完毕数据库的周期性操作都必须借助这些操作系统实现. 在m ...
- Android自己定义矩形及selector、shape的使用
[声明]转载请注明出处.此文出自指尖飞落的博客:http://blog.csdn.net/huntersnail --每天写一篇博客.每天做一点技术积累! Android自己定义矩形及selector ...
- 第十七章_Web注解
1.HandlesTypes 这个注解类型用来声明ServletContainerInitializer能够处理哪些类型的类.它有一个属性.一个值.用来声明类的类型.比如,以下的ServletCont ...
- extjs 时间范围选择的实现
extjs中 有时须要选择一个日期范围 ,须要自己主动推断,选择的開始日期不能大于结束日期,或结束日期不能小于開始日期,实现的代码例如以下 效果图: watermark/2/text/aHR0cDov ...
- java发送邮件带附件
package com.smtp; import java.util.Vector; public class MailBean { private String to; // 收件人 private ...
- Asp.net动态页面静态化之初始NVelocity模板引擎
Asp.net动态页面静态化之初始NVelocity模板引擎 静态页面是网页的代码都在页面中,不须要运行asp,php,jsp,.net等程序生成client网页代码的网页,静态页面网址中一般不含&q ...
- nyoj 585 取石子(六) 【Nim】
取石子(六) 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描写叙述 近期TopCoder的PIAOYI和HRDV非常无聊,于是就想了一个游戏,游戏是这种:有n堆石子,两个人 ...
- silverlight wpf DataTemplate Command binding
<Grid x:Name="LayoutRoot" Background="White"> <CommonControl:NoapDataGr ...