compress.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  1. var __assign = (this && this.__assign) || function () {
  2. __assign = Object.assign || function(t) {
  3. for (var s, i = 1, n = arguments.length; i < n; i++) {
  4. s = arguments[i];
  5. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
  6. t[p] = s[p];
  7. }
  8. return t;
  9. };
  10. return __assign.apply(this, arguments);
  11. };
  12. var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
  13. function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
  14. return new (P || (P = Promise))(function (resolve, reject) {
  15. function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
  16. function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
  17. function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
  18. step((generator = generator.apply(thisArg, _arguments || [])).next());
  19. });
  20. };
  21. var __generator = (this && this.__generator) || function (thisArg, body) {
  22. var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
  23. return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
  24. function verb(n) { return function (v) { return step([n, v]); }; }
  25. function step(op) {
  26. if (f) throw new TypeError("Generator is already executing.");
  27. while (_) try {
  28. 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;
  29. if (y = 0, t) op = [op[0] & 2, t.value];
  30. switch (op[0]) {
  31. case 0: case 1: t = op; break;
  32. case 4: _.label++; return { value: op[1], done: false };
  33. case 5: _.label++; y = op[1]; op = [0]; continue;
  34. case 7: op = _.ops.pop(); _.trys.pop(); continue;
  35. default:
  36. if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
  37. if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
  38. if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
  39. if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
  40. if (t[2]) _.ops.pop();
  41. _.trys.pop(); continue;
  42. }
  43. op = body.call(thisArg, _);
  44. } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
  45. if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
  46. }
  47. };
  48. import { QiniuErrorName, QiniuError } from '../errors';
  49. import { createObjectURL } from './helper';
  50. var mimeTypes = {
  51. PNG: 'image/png',
  52. JPEG: 'image/jpeg',
  53. WEBP: 'image/webp',
  54. BMP: 'image/bmp'
  55. };
  56. var maxSteps = 4;
  57. var scaleFactor = Math.log(2);
  58. var supportMimeTypes = Object.keys(mimeTypes).map(function (type) { return mimeTypes[type]; });
  59. var defaultType = mimeTypes.JPEG;
  60. function isSupportedType(type) {
  61. return supportMimeTypes.includes(type);
  62. }
  63. var Compress = /** @class */ (function () {
  64. function Compress(file, config) {
  65. this.file = file;
  66. this.config = config;
  67. this.config = __assign({ quality: 0.92, noCompressIfLarger: false }, this.config);
  68. }
  69. Compress.prototype.process = function () {
  70. return __awaiter(this, void 0, void 0, function () {
  71. var srcDimension, originImage, canvas, scale, scaleCanvas, distBlob;
  72. return __generator(this, function (_a) {
  73. switch (_a.label) {
  74. case 0:
  75. this.outputType = this.file.type;
  76. srcDimension = {};
  77. if (!isSupportedType(this.file.type)) {
  78. throw new QiniuError(QiniuErrorName.UnsupportedFileType, "unsupported file type: " + this.file.type);
  79. }
  80. return [4 /*yield*/, this.getOriginImage()];
  81. case 1:
  82. originImage = _a.sent();
  83. return [4 /*yield*/, this.getCanvas(originImage)];
  84. case 2:
  85. canvas = _a.sent();
  86. scale = 1;
  87. if (this.config.maxWidth) {
  88. scale = Math.min(1, this.config.maxWidth / canvas.width);
  89. }
  90. if (this.config.maxHeight) {
  91. scale = Math.min(1, scale, this.config.maxHeight / canvas.height);
  92. }
  93. srcDimension.width = canvas.width;
  94. srcDimension.height = canvas.height;
  95. return [4 /*yield*/, this.doScale(canvas, scale)];
  96. case 3:
  97. scaleCanvas = _a.sent();
  98. distBlob = this.toBlob(scaleCanvas);
  99. if (distBlob.size > this.file.size && this.config.noCompressIfLarger) {
  100. return [2 /*return*/, {
  101. dist: this.file,
  102. width: srcDimension.width,
  103. height: srcDimension.height
  104. }];
  105. }
  106. return [2 /*return*/, {
  107. dist: distBlob,
  108. width: scaleCanvas.width,
  109. height: scaleCanvas.height
  110. }];
  111. }
  112. });
  113. });
  114. };
  115. Compress.prototype.clear = function (ctx, width, height) {
  116. // jpeg 没有 alpha 通道,透明区间会被填充成黑色,这里把透明区间填充为白色
  117. if (this.outputType === defaultType) {
  118. ctx.fillStyle = '#fff';
  119. ctx.fillRect(0, 0, width, height);
  120. }
  121. else {
  122. ctx.clearRect(0, 0, width, height);
  123. }
  124. };
  125. /** 通过 file 初始化 image 对象 */
  126. Compress.prototype.getOriginImage = function () {
  127. var _this = this;
  128. return new Promise(function (resolve, reject) {
  129. var url = createObjectURL(_this.file);
  130. var img = new Image();
  131. img.onload = function () {
  132. resolve(img);
  133. };
  134. img.onerror = function () {
  135. reject('image load error');
  136. };
  137. img.src = url;
  138. });
  139. };
  140. Compress.prototype.getCanvas = function (img) {
  141. var _this = this;
  142. return new Promise(function (resolve, reject) {
  143. var canvas = document.createElement('canvas');
  144. var context = canvas.getContext('2d');
  145. if (!context) {
  146. reject(new QiniuError(QiniuErrorName.GetCanvasContextFailed, 'context is null'));
  147. return;
  148. }
  149. var width = img.width, height = img.height;
  150. canvas.height = height;
  151. canvas.width = width;
  152. _this.clear(context, width, height);
  153. context.drawImage(img, 0, 0);
  154. resolve(canvas);
  155. });
  156. };
  157. Compress.prototype.doScale = function (source, scale) {
  158. return __awaiter(this, void 0, void 0, function () {
  159. var sctx, steps, factor, mirror, mctx, width, height, originWidth, originHeight, src, context, i, dw, dh, canvas, data;
  160. return __generator(this, function (_a) {
  161. if (scale === 1) {
  162. return [2 /*return*/, source];
  163. }
  164. sctx = source.getContext('2d');
  165. steps = Math.min(maxSteps, Math.ceil((1 / scale) / scaleFactor));
  166. factor = Math.pow(scale, (1 / steps));
  167. mirror = document.createElement('canvas');
  168. mctx = mirror.getContext('2d');
  169. width = source.width, height = source.height;
  170. originWidth = width;
  171. originHeight = height;
  172. mirror.width = width;
  173. mirror.height = height;
  174. if (!mctx || !sctx) {
  175. throw new QiniuError(QiniuErrorName.GetCanvasContextFailed, "mctx or sctx can't be null");
  176. }
  177. for (i = 0; i < steps; i++) {
  178. dw = width * factor | 0 // eslint-disable-line no-bitwise
  179. ;
  180. dh = height * factor | 0 // eslint-disable-line no-bitwise
  181. ;
  182. // 到最后一步的时候 dw, dh 用目标缩放尺寸,否则会出现最后尺寸偏小的情况
  183. if (i === steps - 1) {
  184. dw = originWidth * scale;
  185. dh = originHeight * scale;
  186. }
  187. if (i % 2 === 0) {
  188. src = source;
  189. context = mctx;
  190. }
  191. else {
  192. src = mirror;
  193. context = sctx;
  194. }
  195. // 每次画前都清空,避免图像重叠
  196. this.clear(context, width, height);
  197. context.drawImage(src, 0, 0, width, height, 0, 0, dw, dh);
  198. width = dw;
  199. height = dh;
  200. }
  201. canvas = src === source ? mirror : source;
  202. data = context.getImageData(0, 0, width, height);
  203. // resize
  204. canvas.width = width;
  205. canvas.height = height;
  206. // store image data
  207. context.putImageData(data, 0, 0);
  208. return [2 /*return*/, canvas];
  209. });
  210. });
  211. };
  212. /** 这里把 base64 字符串转为 blob 对象 */
  213. Compress.prototype.toBlob = function (result) {
  214. var dataURL = result.toDataURL(this.outputType, this.config.quality);
  215. var buffer = atob(dataURL.split(',')[1]).split('').map(function (char) { return char.charCodeAt(0); });
  216. var blob = new Blob([new Uint8Array(buffer)], { type: this.outputType });
  217. return blob;
  218. };
  219. return Compress;
  220. }());
  221. var compressImage = function (file, options) { return new Compress(file, options).process(); };
  222. export default compressImage;
  223. //# sourceMappingURL=compress.js.map