123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423 |
- "use strict";
- var _interopRequireDefault = require("@babel/runtime-corejs2/helpers/interopRequireDefault");
- var _Object$defineProperty = require("@babel/runtime-corejs2/core-js/object/define-property");
- _Object$defineProperty(exports, "__esModule", {
- value: true
- });
- exports["default"] = void 0;
- var _keys = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/object/keys"));
- var _iterator = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/symbol/iterator"));
- var _symbol = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/symbol"));
- var _promise = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/promise"));
- var _assign = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/object/assign"));
- var _errors = require("../errors");
- var _helper = require("./helper");
- var __assign = void 0 && (void 0).__assign || function () {
- __assign = _assign["default"] || function (t) {
- for (var s, i = 1, n = arguments.length; i < n; i++) {
- s = arguments[i];
- for (var p in s) {
- if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
- }
- }
- return t;
- };
- return __assign.apply(this, arguments);
- };
- var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
- function adopt(value) {
- return value instanceof P ? value : new P(function (resolve) {
- resolve(value);
- });
- }
- return new (P || (P = _promise["default"]))(function (resolve, reject) {
- function fulfilled(value) {
- try {
- step(generator.next(value));
- } catch (e) {
- reject(e);
- }
- }
- function rejected(value) {
- try {
- step(generator["throw"](value));
- } catch (e) {
- reject(e);
- }
- }
- function step(result) {
- result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
- }
- step((generator = generator.apply(thisArg, _arguments || [])).next());
- });
- };
- var __generator = void 0 && (void 0).__generator || function (thisArg, body) {
- var _ = {
- label: 0,
- sent: function sent() {
- if (t[0] & 1) throw t[1];
- return t[1];
- },
- trys: [],
- ops: []
- },
- f,
- y,
- t,
- g;
- return g = {
- next: verb(0),
- "throw": verb(1),
- "return": verb(2)
- }, typeof _symbol["default"] === "function" && (g[_iterator["default"]] = function () {
- return this;
- }), g;
- function verb(n) {
- return function (v) {
- return step([n, v]);
- };
- }
- function step(op) {
- if (f) throw new TypeError("Generator is already executing.");
- while (_) {
- try {
- if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
- if (y = 0, t) op = [op[0] & 2, t.value];
- switch (op[0]) {
- case 0:
- case 1:
- t = op;
- break;
- case 4:
- _.label++;
- return {
- value: op[1],
- done: false
- };
- case 5:
- _.label++;
- y = op[1];
- op = [0];
- continue;
- case 7:
- op = _.ops.pop();
- _.trys.pop();
- continue;
- default:
- if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
- _ = 0;
- continue;
- }
- if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
- _.label = op[1];
- break;
- }
- if (op[0] === 6 && _.label < t[1]) {
- _.label = t[1];
- t = op;
- break;
- }
- if (t && _.label < t[2]) {
- _.label = t[2];
- _.ops.push(op);
- break;
- }
- if (t[2]) _.ops.pop();
- _.trys.pop();
- continue;
- }
- op = body.call(thisArg, _);
- } catch (e) {
- op = [6, e];
- y = 0;
- } finally {
- f = t = 0;
- }
- }
- if (op[0] & 5) throw op[1];
- return {
- value: op[0] ? op[1] : void 0,
- done: true
- };
- }
- };
- var mimeTypes = {
- PNG: 'image/png',
- JPEG: 'image/jpeg',
- WEBP: 'image/webp',
- BMP: 'image/bmp'
- };
- var maxSteps = 4;
- var scaleFactor = Math.log(2);
- var supportMimeTypes = (0, _keys["default"])(mimeTypes).map(function (type) {
- return mimeTypes[type];
- });
- var defaultType = mimeTypes.JPEG;
- function isSupportedType(type) {
- return supportMimeTypes.includes(type);
- }
- var Compress =
- /** @class */
- function () {
- function Compress(file, config) {
- this.file = file;
- this.config = config;
- this.config = __assign({
- quality: 0.92,
- noCompressIfLarger: false
- }, this.config);
- }
- Compress.prototype.process = function () {
- return __awaiter(this, void 0, void 0, function () {
- var srcDimension, originImage, canvas, scale, scaleCanvas, distBlob;
- return __generator(this, function (_a) {
- switch (_a.label) {
- case 0:
- this.outputType = this.file.type;
- srcDimension = {};
- if (!isSupportedType(this.file.type)) {
- throw new _errors.QiniuError(_errors.QiniuErrorName.UnsupportedFileType, "unsupported file type: " + this.file.type);
- }
- return [4
- /*yield*/
- , this.getOriginImage()];
- case 1:
- originImage = _a.sent();
- return [4
- /*yield*/
- , this.getCanvas(originImage)];
- case 2:
- canvas = _a.sent();
- scale = 1;
- if (this.config.maxWidth) {
- scale = Math.min(1, this.config.maxWidth / canvas.width);
- }
- if (this.config.maxHeight) {
- scale = Math.min(1, scale, this.config.maxHeight / canvas.height);
- }
- srcDimension.width = canvas.width;
- srcDimension.height = canvas.height;
- return [4
- /*yield*/
- , this.doScale(canvas, scale)];
- case 3:
- scaleCanvas = _a.sent();
- distBlob = this.toBlob(scaleCanvas);
- if (distBlob.size > this.file.size && this.config.noCompressIfLarger) {
- return [2
- /*return*/
- , {
- dist: this.file,
- width: srcDimension.width,
- height: srcDimension.height
- }];
- }
- return [2
- /*return*/
- , {
- dist: distBlob,
- width: scaleCanvas.width,
- height: scaleCanvas.height
- }];
- }
- });
- });
- };
- Compress.prototype.clear = function (ctx, width, height) {
- // jpeg 没有 alpha 通道,透明区间会被填充成黑色,这里把透明区间填充为白色
- if (this.outputType === defaultType) {
- ctx.fillStyle = '#fff';
- ctx.fillRect(0, 0, width, height);
- } else {
- ctx.clearRect(0, 0, width, height);
- }
- };
- /** 通过 file 初始化 image 对象 */
- Compress.prototype.getOriginImage = function () {
- var _this = this;
- return new _promise["default"](function (resolve, reject) {
- var url = (0, _helper.createObjectURL)(_this.file);
- var img = new Image();
- img.onload = function () {
- resolve(img);
- };
- img.onerror = function () {
- reject('image load error');
- };
- img.src = url;
- });
- };
- Compress.prototype.getCanvas = function (img) {
- var _this = this;
- return new _promise["default"](function (resolve, reject) {
- var canvas = document.createElement('canvas');
- var context = canvas.getContext('2d');
- if (!context) {
- reject(new _errors.QiniuError(_errors.QiniuErrorName.GetCanvasContextFailed, 'context is null'));
- return;
- }
- var width = img.width,
- height = img.height;
- canvas.height = height;
- canvas.width = width;
- _this.clear(context, width, height);
- context.drawImage(img, 0, 0);
- resolve(canvas);
- });
- };
- Compress.prototype.doScale = function (source, scale) {
- return __awaiter(this, void 0, void 0, function () {
- var sctx, steps, factor, mirror, mctx, width, height, originWidth, originHeight, src, context, i, dw, dh, canvas, data;
- return __generator(this, function (_a) {
- if (scale === 1) {
- return [2
- /*return*/
- , source];
- }
- sctx = source.getContext('2d');
- steps = Math.min(maxSteps, Math.ceil(1 / scale / scaleFactor));
- factor = Math.pow(scale, 1 / steps);
- mirror = document.createElement('canvas');
- mctx = mirror.getContext('2d');
- width = source.width, height = source.height;
- originWidth = width;
- originHeight = height;
- mirror.width = width;
- mirror.height = height;
- if (!mctx || !sctx) {
- throw new _errors.QiniuError(_errors.QiniuErrorName.GetCanvasContextFailed, "mctx or sctx can't be null");
- }
- for (i = 0; i < steps; i++) {
- dw = width * factor | 0 // eslint-disable-line no-bitwise
- ;
- dh = height * factor | 0 // eslint-disable-line no-bitwise
- ; // 到最后一步的时候 dw, dh 用目标缩放尺寸,否则会出现最后尺寸偏小的情况
- if (i === steps - 1) {
- dw = originWidth * scale;
- dh = originHeight * scale;
- }
- if (i % 2 === 0) {
- src = source;
- context = mctx;
- } else {
- src = mirror;
- context = sctx;
- } // 每次画前都清空,避免图像重叠
- this.clear(context, width, height);
- context.drawImage(src, 0, 0, width, height, 0, 0, dw, dh);
- width = dw;
- height = dh;
- }
- canvas = src === source ? mirror : source;
- data = context.getImageData(0, 0, width, height); // resize
- canvas.width = width;
- canvas.height = height; // store image data
- context.putImageData(data, 0, 0);
- return [2
- /*return*/
- , canvas];
- });
- });
- };
- /** 这里把 base64 字符串转为 blob 对象 */
- Compress.prototype.toBlob = function (result) {
- var dataURL = result.toDataURL(this.outputType, this.config.quality);
- var buffer = atob(dataURL.split(',')[1]).split('').map(function (_char) {
- return _char.charCodeAt(0);
- });
- var blob = new Blob([new Uint8Array(buffer)], {
- type: this.outputType
- });
- return blob;
- };
- return Compress;
- }();
- var compressImage = function compressImage(file, options) {
- return new Compress(file, options).process();
- };
- var _default = compressImage;
- exports["default"] = _default;
|