utils.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.file2Obj = file2Obj;
  7. exports.getFileItem = getFileItem;
  8. exports.isImageUrl = void 0;
  9. exports.previewImage = previewImage;
  10. exports.removeFileItem = removeFileItem;
  11. exports.updateFileList = updateFileList;
  12. var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
  13. function file2Obj(file) {
  14. return Object.assign(Object.assign({}, file), {
  15. lastModified: file.lastModified,
  16. lastModifiedDate: file.lastModifiedDate,
  17. name: file.name,
  18. size: file.size,
  19. type: file.type,
  20. uid: file.uid,
  21. percent: 0,
  22. originFileObj: file
  23. });
  24. }
  25. /** Upload fileList. Replace file if exist or just push into it. */
  26. function updateFileList(file, fileList) {
  27. const nextFileList = (0, _toConsumableArray2.default)(fileList);
  28. const fileIndex = nextFileList.findIndex(({
  29. uid
  30. }) => uid === file.uid);
  31. if (fileIndex === -1) {
  32. nextFileList.push(file);
  33. } else {
  34. nextFileList[fileIndex] = file;
  35. }
  36. return nextFileList;
  37. }
  38. function getFileItem(file, fileList) {
  39. const matchKey = file.uid !== undefined ? 'uid' : 'name';
  40. return fileList.filter(item => item[matchKey] === file[matchKey])[0];
  41. }
  42. function removeFileItem(file, fileList) {
  43. const matchKey = file.uid !== undefined ? 'uid' : 'name';
  44. const removed = fileList.filter(item => item[matchKey] !== file[matchKey]);
  45. if (removed.length === fileList.length) {
  46. return null;
  47. }
  48. return removed;
  49. }
  50. // ==================== Default Image Preview ====================
  51. const extname = (url = '') => {
  52. const temp = url.split('/');
  53. const filename = temp[temp.length - 1];
  54. const filenameWithoutSuffix = filename.split(/#|\?/)[0];
  55. return (/\.[^./\\]*$/.exec(filenameWithoutSuffix) || [''])[0];
  56. };
  57. const isImageFileType = type => type.indexOf('image/') === 0;
  58. const isImageUrl = file => {
  59. if (file.type && !file.thumbUrl) {
  60. return isImageFileType(file.type);
  61. }
  62. const url = file.thumbUrl || file.url || '';
  63. const extension = extname(url);
  64. if (/^data:image\//.test(url) || /(webp|svg|png|gif|jpg|jpeg|jfif|bmp|dpg|ico|heic|heif)$/i.test(extension)) {
  65. return true;
  66. }
  67. if (/^data:/.test(url)) {
  68. // other file types of base64
  69. return false;
  70. }
  71. if (extension) {
  72. // other file types which have extension
  73. return false;
  74. }
  75. return true;
  76. };
  77. exports.isImageUrl = isImageUrl;
  78. const MEASURE_SIZE = 200;
  79. function previewImage(file) {
  80. return new Promise(resolve => {
  81. if (!file.type || !isImageFileType(file.type)) {
  82. resolve('');
  83. return;
  84. }
  85. const canvas = document.createElement('canvas');
  86. canvas.width = MEASURE_SIZE;
  87. canvas.height = MEASURE_SIZE;
  88. canvas.style.cssText = `position: fixed; left: 0; top: 0; width: ${MEASURE_SIZE}px; height: ${MEASURE_SIZE}px; z-index: 9999; display: none;`;
  89. document.body.appendChild(canvas);
  90. const ctx = canvas.getContext('2d');
  91. const img = new Image();
  92. img.onload = () => {
  93. const {
  94. width,
  95. height
  96. } = img;
  97. let drawWidth = MEASURE_SIZE;
  98. let drawHeight = MEASURE_SIZE;
  99. let offsetX = 0;
  100. let offsetY = 0;
  101. if (width > height) {
  102. drawHeight = height * (MEASURE_SIZE / width);
  103. offsetY = -(drawHeight - drawWidth) / 2;
  104. } else {
  105. drawWidth = width * (MEASURE_SIZE / height);
  106. offsetX = -(drawWidth - drawHeight) / 2;
  107. }
  108. ctx.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);
  109. const dataURL = canvas.toDataURL();
  110. document.body.removeChild(canvas);
  111. window.URL.revokeObjectURL(img.src);
  112. resolve(dataURL);
  113. };
  114. img.crossOrigin = 'anonymous';
  115. if (file.type.startsWith('image/svg+xml')) {
  116. const reader = new FileReader();
  117. reader.onload = () => {
  118. if (reader.result && typeof reader.result === 'string') {
  119. img.src = reader.result;
  120. }
  121. };
  122. reader.readAsDataURL(file);
  123. } else if (file.type.startsWith('image/gif')) {
  124. const reader = new FileReader();
  125. reader.onload = () => {
  126. if (reader.result) {
  127. resolve(reader.result);
  128. }
  129. };
  130. reader.readAsDataURL(file);
  131. } else {
  132. img.src = window.URL.createObjectURL(file);
  133. }
  134. });
  135. }