原理 用 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的更多相关文章

  1. js压缩图片base64长度

    var myCanvas=$('.img-container > img').cropper('getCroppedCanvas'); (function (base64){ var image ...

  2. JS压缩图片(canvas),返回base64码

    上传图片时总会遇到图片过大上传不上去的问题,本方法是在网上搜的压缩图片的例子,我测试过了,确实能用,但是照搬别人的代码,发现压缩后图片会失真,不清晰,现经修改图片清晰度还可以,不仔细看差别不大,so, ...

  3. js 压缩图片(只缩小体积,不更改图片尺寸)

      1.情景展示 如上图所示,点击上传图片按钮,调用手机摄像头拍照功能. <input onchange="javascript:imgFun.uploadPicture();&quo ...

  4. js 压缩图片 上传

    感谢,参考了以下作者的绝大部分内容 https://blog.csdn.net/tangxiujiang/article/details/78755292 https://blog.csdn.net/ ...

  5. 了解JS压缩图片,这一篇就够了

    前言 公司的移动端业务需要在用户上传图片是由前端压缩图片大小,再上传到服务器,这样可以减少移动端上行流量,减少用户上传等待时长,优化用户体验. 插播一下,本文案例已整理成插件,已上传npm ,可通过 ...

  6. base64之js压缩图片

    在日常的一些项目中会有上传图片之类的接口,如果图片过大了再上传的时候是非常的耗时以及占用资源,在这里就给大家分享一下如何在js中把大的图片压缩成小的图片,我这里的功能是用户点击按钮调用相机或者选择文件 ...

  7. js压缩图片上传插件localResizeIMG

    示例 /** * 本地图片压缩后上传 */ $("#vfile").change(function(){ var _this = $(this); lrz(this.files[0 ...

  8. js压缩图片并上传,不失真,保证图片清晰度

    <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  9. html5+js压缩图片上传

    最近在折腾移动站的开发,涉及到了一个手机里面上传图片.于是经过N久的折腾,找到一个插件,用法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

随机推荐

  1. 异构关系数据库(Sqlserver与MySql)之间的数据类型转换参考

    一.SqlServer到MySql的数据类型的转变 编号 SqlServer ToMySql MySql 1 binary(50) LONGBLOB binary 2 bit CHAR(1) bit ...

  2. java源码之List(ArrayList,LinkList,Vertor)

    1,List概括 List的框架图 (01) List 是一个接口,它继承于Collection的接口.它代表着有序的队列. (02) AbstractList 是一个抽象类,它继承于Abstract ...

  3. MySQL事件调度器Event Scheduler

    我们都知道windows的计划任务和linux的crontab都是用来实现一些周期性的任务和固定时间须要运行的任务. 在mysql5.1之前我们完毕数据库的周期性操作都必须借助这些操作系统实现. 在m ...

  4. Android自己定义矩形及selector、shape的使用

    [声明]转载请注明出处.此文出自指尖飞落的博客:http://blog.csdn.net/huntersnail --每天写一篇博客.每天做一点技术积累! Android自己定义矩形及selector ...

  5. 第十七章_Web注解

    1.HandlesTypes 这个注解类型用来声明ServletContainerInitializer能够处理哪些类型的类.它有一个属性.一个值.用来声明类的类型.比如,以下的ServletCont ...

  6. extjs 时间范围选择的实现

    extjs中 有时须要选择一个日期范围 ,须要自己主动推断,选择的開始日期不能大于结束日期,或结束日期不能小于開始日期,实现的代码例如以下 效果图: watermark/2/text/aHR0cDov ...

  7. java发送邮件带附件

    package com.smtp; import java.util.Vector; public class MailBean { private String to; // 收件人 private ...

  8. Asp.net动态页面静态化之初始NVelocity模板引擎

    Asp.net动态页面静态化之初始NVelocity模板引擎 静态页面是网页的代码都在页面中,不须要运行asp,php,jsp,.net等程序生成client网页代码的网页,静态页面网址中一般不含&q ...

  9. nyoj 585 取石子(六) 【Nim】

    取石子(六) 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描写叙述 近期TopCoder的PIAOYI和HRDV非常无聊,于是就想了一个游戏,游戏是这种:有n堆石子,两个人 ...

  10. silverlight wpf DataTemplate Command binding

    <Grid x:Name="LayoutRoot" Background="White"> <CommonControl:NoapDataGr ...