compress.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime-corejs2/helpers/interopRequireDefault");
  3. var _Object$defineProperty = require("@babel/runtime-corejs2/core-js/object/define-property");
  4. _Object$defineProperty(exports, "__esModule", {
  5. value: true
  6. });
  7. exports["default"] = void 0;
  8. var _keys = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/object/keys"));
  9. var _iterator = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/symbol/iterator"));
  10. var _symbol = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/symbol"));
  11. var _promise = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/promise"));
  12. var _assign = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/object/assign"));
  13. var _errors = require("../errors");
  14. var _helper = require("./helper");
  15. var __assign = void 0 && (void 0).__assign || function () {
  16. __assign = _assign["default"] || function (t) {
  17. for (var s, i = 1, n = arguments.length; i < n; i++) {
  18. s = arguments[i];
  19. for (var p in s) {
  20. if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
  21. }
  22. }
  23. return t;
  24. };
  25. return __assign.apply(this, arguments);
  26. };
  27. var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
  28. function adopt(value) {
  29. return value instanceof P ? value : new P(function (resolve) {
  30. resolve(value);
  31. });
  32. }
  33. return new (P || (P = _promise["default"]))(function (resolve, reject) {
  34. function fulfilled(value) {
  35. try {
  36. step(generator.next(value));
  37. } catch (e) {
  38. reject(e);
  39. }
  40. }
  41. function rejected(value) {
  42. try {
  43. step(generator["throw"](value));
  44. } catch (e) {
  45. reject(e);
  46. }
  47. }
  48. function step(result) {
  49. result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
  50. }
  51. step((generator = generator.apply(thisArg, _arguments || [])).next());
  52. });
  53. };
  54. var __generator = void 0 && (void 0).__generator || function (thisArg, body) {
  55. var _ = {
  56. label: 0,
  57. sent: function sent() {
  58. if (t[0] & 1) throw t[1];
  59. return t[1];
  60. },
  61. trys: [],
  62. ops: []
  63. },
  64. f,
  65. y,
  66. t,
  67. g;
  68. return g = {
  69. next: verb(0),
  70. "throw": verb(1),
  71. "return": verb(2)
  72. }, typeof _symbol["default"] === "function" && (g[_iterator["default"]] = function () {
  73. return this;
  74. }), g;
  75. function verb(n) {
  76. return function (v) {
  77. return step([n, v]);
  78. };
  79. }
  80. function step(op) {
  81. if (f) throw new TypeError("Generator is already executing.");
  82. while (_) {
  83. try {
  84. 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;
  85. if (y = 0, t) op = [op[0] & 2, t.value];
  86. switch (op[0]) {
  87. case 0:
  88. case 1:
  89. t = op;
  90. break;
  91. case 4:
  92. _.label++;
  93. return {
  94. value: op[1],
  95. done: false
  96. };
  97. case 5:
  98. _.label++;
  99. y = op[1];
  100. op = [0];
  101. continue;
  102. case 7:
  103. op = _.ops.pop();
  104. _.trys.pop();
  105. continue;
  106. default:
  107. if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
  108. _ = 0;
  109. continue;
  110. }
  111. if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
  112. _.label = op[1];
  113. break;
  114. }
  115. if (op[0] === 6 && _.label < t[1]) {
  116. _.label = t[1];
  117. t = op;
  118. break;
  119. }
  120. if (t && _.label < t[2]) {
  121. _.label = t[2];
  122. _.ops.push(op);
  123. break;
  124. }
  125. if (t[2]) _.ops.pop();
  126. _.trys.pop();
  127. continue;
  128. }
  129. op = body.call(thisArg, _);
  130. } catch (e) {
  131. op = [6, e];
  132. y = 0;
  133. } finally {
  134. f = t = 0;
  135. }
  136. }
  137. if (op[0] & 5) throw op[1];
  138. return {
  139. value: op[0] ? op[1] : void 0,
  140. done: true
  141. };
  142. }
  143. };
  144. var mimeTypes = {
  145. PNG: 'image/png',
  146. JPEG: 'image/jpeg',
  147. WEBP: 'image/webp',
  148. BMP: 'image/bmp'
  149. };
  150. var maxSteps = 4;
  151. var scaleFactor = Math.log(2);
  152. var supportMimeTypes = (0, _keys["default"])(mimeTypes).map(function (type) {
  153. return mimeTypes[type];
  154. });
  155. var defaultType = mimeTypes.JPEG;
  156. function isSupportedType(type) {
  157. return supportMimeTypes.includes(type);
  158. }
  159. var Compress =
  160. /** @class */
  161. function () {
  162. function Compress(file, config) {
  163. this.file = file;
  164. this.config = config;
  165. this.config = __assign({
  166. quality: 0.92,
  167. noCompressIfLarger: false
  168. }, this.config);
  169. }
  170. Compress.prototype.process = function () {
  171. return __awaiter(this, void 0, void 0, function () {
  172. var srcDimension, originImage, canvas, scale, scaleCanvas, distBlob;
  173. return __generator(this, function (_a) {
  174. switch (_a.label) {
  175. case 0:
  176. this.outputType = this.file.type;
  177. srcDimension = {};
  178. if (!isSupportedType(this.file.type)) {
  179. throw new _errors.QiniuError(_errors.QiniuErrorName.UnsupportedFileType, "unsupported file type: " + this.file.type);
  180. }
  181. return [4
  182. /*yield*/
  183. , this.getOriginImage()];
  184. case 1:
  185. originImage = _a.sent();
  186. return [4
  187. /*yield*/
  188. , this.getCanvas(originImage)];
  189. case 2:
  190. canvas = _a.sent();
  191. scale = 1;
  192. if (this.config.maxWidth) {
  193. scale = Math.min(1, this.config.maxWidth / canvas.width);
  194. }
  195. if (this.config.maxHeight) {
  196. scale = Math.min(1, scale, this.config.maxHeight / canvas.height);
  197. }
  198. srcDimension.width = canvas.width;
  199. srcDimension.height = canvas.height;
  200. return [4
  201. /*yield*/
  202. , this.doScale(canvas, scale)];
  203. case 3:
  204. scaleCanvas = _a.sent();
  205. distBlob = this.toBlob(scaleCanvas);
  206. if (distBlob.size > this.file.size && this.config.noCompressIfLarger) {
  207. return [2
  208. /*return*/
  209. , {
  210. dist: this.file,
  211. width: srcDimension.width,
  212. height: srcDimension.height
  213. }];
  214. }
  215. return [2
  216. /*return*/
  217. , {
  218. dist: distBlob,
  219. width: scaleCanvas.width,
  220. height: scaleCanvas.height
  221. }];
  222. }
  223. });
  224. });
  225. };
  226. Compress.prototype.clear = function (ctx, width, height) {
  227. // jpeg 没有 alpha 通道,透明区间会被填充成黑色,这里把透明区间填充为白色
  228. if (this.outputType === defaultType) {
  229. ctx.fillStyle = '#fff';
  230. ctx.fillRect(0, 0, width, height);
  231. } else {
  232. ctx.clearRect(0, 0, width, height);
  233. }
  234. };
  235. /** 通过 file 初始化 image 对象 */
  236. Compress.prototype.getOriginImage = function () {
  237. var _this = this;
  238. return new _promise["default"](function (resolve, reject) {
  239. var url = (0, _helper.createObjectURL)(_this.file);
  240. var img = new Image();
  241. img.onload = function () {
  242. resolve(img);
  243. };
  244. img.onerror = function () {
  245. reject('image load error');
  246. };
  247. img.src = url;
  248. });
  249. };
  250. Compress.prototype.getCanvas = function (img) {
  251. var _this = this;
  252. return new _promise["default"](function (resolve, reject) {
  253. var canvas = document.createElement('canvas');
  254. var context = canvas.getContext('2d');
  255. if (!context) {
  256. reject(new _errors.QiniuError(_errors.QiniuErrorName.GetCanvasContextFailed, 'context is null'));
  257. return;
  258. }
  259. var width = img.width,
  260. height = img.height;
  261. canvas.height = height;
  262. canvas.width = width;
  263. _this.clear(context, width, height);
  264. context.drawImage(img, 0, 0);
  265. resolve(canvas);
  266. });
  267. };
  268. Compress.prototype.doScale = function (source, scale) {
  269. return __awaiter(this, void 0, void 0, function () {
  270. var sctx, steps, factor, mirror, mctx, width, height, originWidth, originHeight, src, context, i, dw, dh, canvas, data;
  271. return __generator(this, function (_a) {
  272. if (scale === 1) {
  273. return [2
  274. /*return*/
  275. , source];
  276. }
  277. sctx = source.getContext('2d');
  278. steps = Math.min(maxSteps, Math.ceil(1 / scale / scaleFactor));
  279. factor = Math.pow(scale, 1 / steps);
  280. mirror = document.createElement('canvas');
  281. mctx = mirror.getContext('2d');
  282. width = source.width, height = source.height;
  283. originWidth = width;
  284. originHeight = height;
  285. mirror.width = width;
  286. mirror.height = height;
  287. if (!mctx || !sctx) {
  288. throw new _errors.QiniuError(_errors.QiniuErrorName.GetCanvasContextFailed, "mctx or sctx can't be null");
  289. }
  290. for (i = 0; i < steps; i++) {
  291. dw = width * factor | 0 // eslint-disable-line no-bitwise
  292. ;
  293. dh = height * factor | 0 // eslint-disable-line no-bitwise
  294. ; // 到最后一步的时候 dw, dh 用目标缩放尺寸,否则会出现最后尺寸偏小的情况
  295. if (i === steps - 1) {
  296. dw = originWidth * scale;
  297. dh = originHeight * scale;
  298. }
  299. if (i % 2 === 0) {
  300. src = source;
  301. context = mctx;
  302. } else {
  303. src = mirror;
  304. context = sctx;
  305. } // 每次画前都清空,避免图像重叠
  306. this.clear(context, width, height);
  307. context.drawImage(src, 0, 0, width, height, 0, 0, dw, dh);
  308. width = dw;
  309. height = dh;
  310. }
  311. canvas = src === source ? mirror : source;
  312. data = context.getImageData(0, 0, width, height); // resize
  313. canvas.width = width;
  314. canvas.height = height; // store image data
  315. context.putImageData(data, 0, 0);
  316. return [2
  317. /*return*/
  318. , canvas];
  319. });
  320. });
  321. };
  322. /** 这里把 base64 字符串转为 blob 对象 */
  323. Compress.prototype.toBlob = function (result) {
  324. var dataURL = result.toDataURL(this.outputType, this.config.quality);
  325. var buffer = atob(dataURL.split(',')[1]).split('').map(function (_char) {
  326. return _char.charCodeAt(0);
  327. });
  328. var blob = new Blob([new Uint8Array(buffer)], {
  329. type: this.outputType
  330. });
  331. return blob;
  332. };
  333. return Compress;
  334. }();
  335. var compressImage = function compressImage(file, options) {
  336. return new Compress(file, options).process();
  337. };
  338. var _default = compressImage;
  339. exports["default"] = _default;