/**
* Created Date: 2018-06-21
* Author: 于家成
* Last Modified: Fri Jun 29 2018
* Modified By: 于家成
* Copyright (c) 2018
* ------------------------------------
* Javascript will save your soul!
*/
;(function (global, factory) {
// console.log(module);
if (typeof module !== "undefined" && module.exports) {
module.exports = factory();
} else if (typeof define === "function" && define.amd) {
define(factory);
} else {
global.PictureCompress = factory();
}
}(this, (function () {
"use strict"
var DEFAULTS = {
quality: 0.1, //设置图片的压缩质量
maxsize: 100 * 1024, //图片大小
maxRatio: 4000000, //最大像素
maxUploadfiles: 9, //同时允许上传的照片数量
tmpId: null, //input生成的位置
inputId: null, //
showBox: null, //图片预览的容器
};
// RegExps
var REGEXP_IMG_FORMAT = /\/(?:jpeg|png|gif)/i;
// var REGEXP_HYPHENATE = /([a-z\d])([A-Z])/g;
// var REGEXP_ORIGINS = /^(https?:)\/\/([^:/?#]+):?(\d*)/i;
// var REGEXP_SPACES = /\s+/;
// var REGEXP_SUFFIX = /^(width|height|left|top|marginLeft|marginTop)$/;
// var REGEXP_TRIM = /^\s+(.*)\s+$/;
// var REGEXP_USERAGENT = /(Macintosh|iPhone|iPod|iPad).*AppleWebKit/i;
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
return typeof obj;
} : function (obj) {
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
};
//tools
function isObject(obj) {
return (typeof obj === 'undefined' ? 'undefined' : _typeof(obj)) === 'object' && obj !== null;
}
function extend(obj) {
for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
if (isObject(obj) && args.length > 0) {
if (Object.assign) {
return Object.assign.apply(Object, [obj].concat(args));
}
args.forEach(function (arg) {
if (isObject(arg)) {
Object.keys(arg).forEach(function (key) {
obj[key] = arg[key];
});
}
});
}
return obj;
}
function PictureCompress(files, opt) {
if (this instanceof PictureCompress) {
this._init(opt);
} else {
return new PictureCompress(files, opt);
}
}
PictureCompress.prototype = {
constructor: this,
_init: function (opt) {
var self = this;
this.opt = extend(DEFAULTS, opt);
this.dom = this._parseToDom();
this.dom.onchange = function (e) {
self._change.apply(self, this.files);
}
},
_parseToDom: function () {
var div = document.getElementById(this.opt.tmpId);
var input = document.createElement('input');
input.type = "file";
input.accept = "image/*";
input.multiple = true;
input.id = this.opt.inputId;
input.style.display = "none";
div.appendChild(input)
return input;
},
_change: function () {
var self = this;
if (!arguments.length) return;
var files = Array.prototype.slice.call(arguments);
if (files.length > this.opt.maxUploadfiles) {
alert("最多同时只能上传" + this.opt.maxUploadfiles + "张图片")
return;
}
files.forEach(function (file, i) {
if (!REGEXP_IMG_FORMAT.test(file.type)) return;
var reader = new FileReader();
var li = document.createElement("li");
var size = file.size / 1024 > 1024 ? (~~(10 * file.size / 1024 / 1024)) / 10 + "MB" : ~~(file.size / 1024) +
"KB";
li.innerHTML = '<div class="progress"><span></span></div><div class="size">' + size + '</div>';
document.querySelector("#" + self.opt.showBox).appendChild(li);
reader.readAsDataURL(file);
reader.onload = function () {
var result = this.result;
var img = new Image();
img.src = result;
li.style.background = "url(" + result + ")";
//如果图片大小小于100kb，则直接上传
if (result.length <= self.opt.maxsize) {
img = null;
// upload(result, file.type, $(li));
return;
}
// 图片加载完毕之后进行压缩，然后上传
if (img.complete) {
callback();
} else {
img.onload = callback;
}
function callback() {
var data = self._compress(img);
// upload(data, file.type, $(li));
img = null;
}
};
})
},
_compress: function (img) {
var self = this;
var initSize = img.src.length,
width = img.width,
height = img.height,
ratio, //如果图片大于四百万像素，计算压缩比并将大小压至400万以下
count;
if ((ratio = width * height / self.opt.maxRatio) > 1) {
ratio = Math.sqrt(ratio);
width /= ratio;
height /= ratio;
} else {
ratio = 1;
}
var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d');
// 瓦片canvas
var tCanvas = document.createElement("canvas");
var tctx = tCanvas.getContext("2d");
canvas.width = width;
canvas.height = height;
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
//如果图片像素大于100万则使用瓦片绘制
if ((count = width * height / 1000000) > 1) {
count = Math.sqrt(count) % 1 > 1 ? ~~(Math.sqrt(count) + 1) : ~~(Math.sqrt(count)); //计算要分成多少块瓦片
// 计算每块瓦片的宽和高
var nw = ~~(width / count);
var nh = ~~(height / count);
tCanvas.width = nw;
tCanvas.height = nh;
for (var i = 0; i < count; i++) {
for (var j = 0; j < count; j++) {
tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
}
}
} else {
ctx.drawImage(img, 0, 0, width, height);
}
//进行最小压缩
var ndata = canvas.toDataURL('image/jpeg', self.opt.quality);
console.log('压缩前：' + initSize);
console.log('压缩后：' + ndata.length);
console.log('压缩率：' + ~~(100 * (initSize - ndata.length) / initSize) + "%");
tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
return ndata;
}
}
return PictureCompress;
})))使用方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#chooise{
height: 300px;
width: 300px;
line-height: 300px;
text-align: center;
font-size: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<ul id="zhanshi">
<!-- 预览展示box -->
</lu>
<div id="showbox">
<div id="chooise">
选择图片
</div>
</div>
<script src="compress.js"></script>
<script>
PictureCompress(null,{
tmpId:"showbox", //input插入位置
inputId:"upBtn", //规定插入的input id
showBox:"zhanshi" // 用于预览展示的box
})
document.querySelector("#chooise").addEventListener("click",function(e){
document.querySelector("#upBtn").click();
},false)
</script>
</body>
</html>