@turbox3d/shared
Version:
turbox shared internal utility
300 lines (299 loc) • 12.5 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.base64toBlob = base64toBlob;
exports.cropImage = cropImage;
exports.getRenderTargetImageData = void 0;
exports.loadImage = loadImage;
exports.loadImageBase64 = loadImageBase64;
exports.loadImageElement = loadImageElement;
exports.mirrorImage = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var THREE = _interopRequireWildcard(require("three"));
var _common = require("./common");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
function convertUrl(url) {
var key = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'turbox';
if (url.includes(';base64,') || !url) {
return url;
}
return (0, _common.updateQueryStringParameter)(url, key, 'true');
}
var mirrorImage = exports.mirrorImage = function mirrorImage(image, materialDirection) {
var isBase64 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
var fileType = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'image/png';
var quality = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = image instanceof Blob ? URL.createObjectURL(image) : convertUrl(image);
return new Promise(function (resolve) {
img.onload = function () {
image instanceof Blob && URL.revokeObjectURL(img.src);
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.translate(materialDirection.x === -1 ? canvas.width : 0, materialDirection.y === -1 ? canvas.height : 0);
ctx.scale(materialDirection.x, materialDirection.y);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
if (isBase64) {
resolve("".concat(canvas.toDataURL(fileType, quality)));
} else {
canvas.toBlob(function (blob) {
if (blob) {
resolve(blob);
}
}, fileType, quality);
}
};
});
};
var getRenderTargetImageData = exports.getRenderTargetImageData = function getRenderTargetImageData(app, width, height, scene, camera) {
var fileType = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 'image/png';
var quality = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 1;
var renderTarget = new THREE.WebGLRenderTarget(width, height, {
minFilter: THREE.LinearFilter
});
// renderTarget.viewport = new THREE.Vector4(0, 0, width, height);
app.setRenderTarget(renderTarget);
app.render(scene, camera);
var buffer = new Uint8Array(width * height * 4);
var clamped = new Uint8ClampedArray(buffer.buffer);
app.readRenderTargetPixels(renderTarget, 0, 0, width, height, buffer);
return new Promise(function (resolve) {
var canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext('2d');
var imageData = new ImageData(clamped, width, height);
ctx.putImageData(imageData, 0, 0);
app.setRenderTarget(null);
app.render(scene, camera);
canvas.toBlob(/*#__PURE__*/function () {
var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(blob) {
var image;
return _regenerator["default"].wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
if (!blob) {
_context.next = 5;
break;
}
_context.next = 3;
return mirrorImage(blob, {
x: 1,
y: -1
}, false, fileType);
case 3:
image = _context.sent;
resolve(image);
case 5:
case "end":
return _context.stop();
}
}, _callee);
}));
return function (_x) {
return _ref.apply(this, arguments);
};
}(), fileType, quality);
});
};
function loadImageBase64(_x2) {
return _loadImageBase.apply(this, arguments);
}
function _loadImageBase() {
_loadImageBase = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(url) {
var fileType,
quality,
img,
_args2 = arguments;
return _regenerator["default"].wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
fileType = _args2.length > 1 && _args2[1] !== undefined ? _args2[1] : 'image/png';
quality = _args2.length > 2 && _args2[2] !== undefined ? _args2[2] : 1;
img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = url instanceof Blob ? URL.createObjectURL(url) : convertUrl(url);
return _context2.abrupt("return", new Promise(function (resolve) {
img.onload = function () {
url instanceof Blob && URL.revokeObjectURL(img.src);
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
var base64 = "".concat(canvas.toDataURL(fileType, quality));
resolve({
base64: base64,
width: img.width,
height: img.height
});
};
}));
case 6:
case "end":
return _context2.stop();
}
}, _callee2);
}));
return _loadImageBase.apply(this, arguments);
}
function loadImage(_x3) {
return _loadImage.apply(this, arguments);
}
function _loadImage() {
_loadImage = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3(url) {
var fileType,
quality,
img,
_args3 = arguments;
return _regenerator["default"].wrap(function _callee3$(_context3) {
while (1) switch (_context3.prev = _context3.next) {
case 0:
fileType = _args3.length > 1 && _args3[1] !== undefined ? _args3[1] : 'image/png';
quality = _args3.length > 2 && _args3[2] !== undefined ? _args3[2] : 1;
img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = url instanceof Blob ? URL.createObjectURL(url) : convertUrl(url);
return _context3.abrupt("return", new Promise(function (resolve) {
img.onload = function () {
url instanceof Blob && URL.revokeObjectURL(img.src);
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
canvas.toBlob(function (blob) {
resolve({
blob: blob,
width: img.width,
height: img.height
});
}, fileType, quality);
};
}));
case 6:
case "end":
return _context3.stop();
}
}, _callee3);
}));
return _loadImage.apply(this, arguments);
}
function loadImageElement(_x4) {
return _loadImageElement.apply(this, arguments);
}
function _loadImageElement() {
_loadImageElement = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee4(url) {
var img;
return _regenerator["default"].wrap(function _callee4$(_context4) {
while (1) switch (_context4.prev = _context4.next) {
case 0:
img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = url instanceof Blob ? URL.createObjectURL(url) : convertUrl(url);
return _context4.abrupt("return", new Promise(function (resolve) {
img.onload = function () {
url instanceof Blob && URL.revokeObjectURL(img.src);
resolve({
element: img,
width: img.width,
height: img.height
});
};
}));
case 4:
case "end":
return _context4.stop();
}
}, _callee4);
}));
return _loadImageElement.apply(this, arguments);
}
function cropImage(_x5, _x6) {
return _cropImage.apply(this, arguments);
}
function _cropImage() {
_cropImage = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee5(url, rect) {
var fileType,
quality,
img,
_args5 = arguments;
return _regenerator["default"].wrap(function _callee5$(_context5) {
while (1) switch (_context5.prev = _context5.next) {
case 0:
fileType = _args5.length > 2 && _args5[2] !== undefined ? _args5[2] : 'image/png';
quality = _args5.length > 3 && _args5[3] !== undefined ? _args5[3] : 1;
img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
if (url instanceof HTMLImageElement) {
img.src = url.src;
} else {
img.src = url instanceof Blob ? URL.createObjectURL(url) : convertUrl(url);
}
return _context5.abrupt("return", new Promise(function (resolve) {
img.onload = function () {
url instanceof Blob && URL.revokeObjectURL(img.src);
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = rect.end.x - rect.start.x;
canvas.height = rect.end.y - rect.start.y;
ctx.drawImage(img, rect.start.x, rect.start.y, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
canvas.toBlob(function (blob) {
if (!blob) {
resolve({
blob: null,
width: 0,
height: 0
});
return;
}
var url = URL.createObjectURL(blob);
var img = new Image();
img.onload = function () {
URL.revokeObjectURL(url);
resolve({
blob: blob,
element: img,
width: canvas.width,
height: canvas.height
});
};
img.src = url;
}, fileType, quality);
};
}));
case 6:
case "end":
return _context5.stop();
}
}, _callee5);
}));
return _cropImage.apply(this, arguments);
}
function base64toBlob(data) {
var sliceSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 512;
var parts = data.split(';base64,');
var imageType = parts[0].split(':')[1];
var byteCharacters = window.atob(parts[1]);
var byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);
var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
var blob = new Blob(byteArrays, {
type: imageType
});
return blob;
}