choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
272 lines (216 loc) • 7.83 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var ImageData = /*#__PURE__*/function () {
function ImageData(dataUrl, type) {
(0, _classCallCheck2["default"])(this, ImageData);
// @ts-ignore
this.dataUrl = dataUrl; // @ts-ignore
this.type = type;
}
/* minify the image
*/
(0, _createClass2["default"])(ImageData, [{
key: "minify",
value: function minify() {
var _this = this;
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
return new Promise(function (resolve, reject) {
// @ts-ignore
var maxWidth = options.maxWidth || 800; // @ts-ignore
var maxHeight = options.maxHeight || 800; // @ts-ignore
var quality = options.quality || .8; // @ts-ignore
if (!_this.dataUrl) {
return reject({
message: '[error] QuillImageDropAndPaste: Fail to minify the image, dataUrl should not be empty.'
});
}
var image = new Image();
image.onload = function () {
var width = image.width;
var height = image.height;
if (width > height) {
if (width > maxWidth) {
image.height = height * maxWidth / width;
image.width = maxWidth;
}
} else {
if (height > maxHeight) {
image.width = width * maxHeight / height;
image.height = maxHeight;
}
}
var canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
var ctx = canvas.getContext('2d'); // @ts-ignore
ctx.drawImage(image, 0, 0, image.width, image.height); // @ts-ignore
var canvasType = _this.type || 'image/png';
var canvasDataUrl = canvas.toDataURL(canvasType, quality);
resolve(new ImageData(canvasDataUrl, canvasType));
}; // @ts-ignore
image.src = _this.dataUrl;
});
}
/* convert blob to file
*/
}, {
key: "toFile",
value: function toFile(filename) {
if (!window.File) {
console.error('[error] QuillImageDropAndPaste: Your browser didnot support File API.');
return null;
} // @ts-ignore
return new File([this.toBlob()], filename, {
type: this.type
});
}
/* convert dataURL to blob
*/
}, {
key: "toBlob",
value: function toBlob() {
// @ts-ignore
var base64 = this.dataUrl.replace(/^[^,]+,/, '');
var buff = this.binaryStringToArrayBuffer(atob(base64)); // @ts-ignore
return this.createBlob([buff], {
type: this.type
});
}
/* generate array buffer from binary string
*/
}, {
key: "binaryStringToArrayBuffer",
value: function binaryStringToArrayBuffer(binary) {
var len = binary.length;
var buffer = new ArrayBuffer(len);
var arr = new Uint8Array(buffer);
var i = -1;
while (++i < len) {
arr[i] = binary.charCodeAt(i);
}
return buffer;
}
/* create blob
*/
}, {
key: "createBlob",
value: function createBlob() {
var parts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
var properties = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
if (typeof properties === 'string') properties = {
type: properties
};
try {
return new Blob(parts, properties);
} catch (e) {
if (e.name !== 'TypeError') throw e; // @ts-ignore
var Builder = typeof BlobBuilder !== 'undefined' // @ts-ignore
? BlobBuilder : typeof MSBlobBuilder !== 'undefined' // @ts-ignore
? MSBlobBuilder : typeof MozBlobBuilder !== 'undefined' // @ts-ignore
? MozBlobBuilder : WebKitBlobBuilder;
var builder = new Builder();
for (var i = 0; i < parts.length; i++) {
builder.append(parts[i]);
} // @ts-ignore
return builder.getBlob(properties.type);
}
}
}]);
return ImageData;
}();
var ImageDropAndPaste = /*#__PURE__*/function () {
function ImageDropAndPaste(quill) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
(0, _classCallCheck2["default"])(this, ImageDropAndPaste);
// @ts-ignore
this.quill = quill; // @ts-ignore
this.options = options;
this.handleDrop = this.handleDrop.bind(this);
this.handlePaste = this.handlePaste.bind(this); // @ts-ignore
this.quill.root.addEventListener('drop', this.handleDrop, false); // @ts-ignore
this.quill.root.addEventListener('paste', this.handlePaste, false);
}
/* handle image drop event
*/
(0, _createClass2["default"])(ImageDropAndPaste, [{
key: "handleDrop",
value: function handleDrop(e) {
var _this2 = this;
e.preventDefault();
if (e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files.length) {
if (document.caretRangeFromPoint) {
var selection = document.getSelection();
var range = document.caretRangeFromPoint(e.clientX, e.clientY);
if (selection && range) {
selection.setBaseAndExtent(range.startContainer, range.startOffset, range.startContainer, range.startOffset);
}
}
this.readFiles(e.dataTransfer.files, function (dataUrl, type) {
type = type || 'image/png'; // @ts-ignore
if (typeof _this2.options.handler === 'function') {
// @ts-ignore
_this2.options.handler.call(_this2, dataUrl, type, new ImageData(dataUrl, type));
} else {
_this2.insert.call(_this2, dataUrl, type);
}
}, e);
}
}
/* handle image paste event
*/
}, {
key: "handlePaste",
value: function handlePaste(e) {
var _this3 = this;
if (e.clipboardData && e.clipboardData.items && e.clipboardData.items.length) {
this.readFiles(e.clipboardData.items, function (dataUrl, type) {
type = type || 'image/png'; // @ts-ignore
if (typeof _this3.options.handler === 'function') {
// @ts-ignore
_this3.options.handler.call(_this3, dataUrl, type, new ImageData(dataUrl, type));
} else {
_this3.insert(dataUrl);
}
}, e);
}
}
/* read the files
*/
}, {
key: "readFiles",
value: function readFiles(files, callback, e) {
[].forEach.call(files, function (file) {
var type = file.type;
if (!type.match(/^image\/(gif|jpe?g|a?png|svg|webp|bmp)/i)) return;
e.preventDefault();
var reader = new FileReader();
reader.onload = function (e) {
// @ts-ignore
callback(e.target.result, type);
};
var blob = file.getAsFile ? file.getAsFile() : file;
if (blob instanceof Blob) reader.readAsDataURL(blob);
});
}
/* insert into the editor
*/
}, {
key: "insert",
value: function insert(dataUrl) {
// @ts-ignore
var index = (this.quill.getSelection() || {}).index || this.quill.getLength(); // @ts-ignore
this.quill.insertEmbed(index, 'image', dataUrl, 'user');
}
}]);
return ImageDropAndPaste;
}(); // @ts-ignore
ImageDropAndPaste.ImageData = ImageData;
var _default = ImageDropAndPaste;
exports["default"] = _default;
//# sourceMappingURL=imageDropAndPaste.js.map