threepipe
Version:
A modern 3D viewer framework built on top of three.js, written in TypeScript, designed to make creating high-quality, modular, and extensible 3D experiences on the web simple and enjoyable.
148 lines • 8.13 kB
JavaScript
import { now } from 'ts-browser-helpers';
function isSafari() {
return navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrome');
}
export class CanvasSnapshot {
static async GetClonedCanvas(canvas, { rect = { x: 0, y: 0, width: canvas.width, height: canvas.height, assumeClientRect: false, normalized: false }, displayPixelRatio = 1, scale = 1, }) {
rect = { ...rect };
// return canvas.toDataURL(mimeType);
// in Safari, images are flipped when premultipliedAlpha is true in canvas, so it works with 2d context, see: https://github.com/pixijs/pixi.js/blob/dev/packages/extract/src/Extract.ts and https://github.com/pixijs/pixi.js/issues/2951
const destCanvas = document.createElementNS('http://www.w3.org/1999/xhtml', 'canvas');
// const iRect = {...rect}
if (!rect.normalized) {
if (rect.assumeClientRect) {
rect.x = Math.floor(rect.x * canvas.width / (displayPixelRatio * canvas.clientWidth));
rect.y = Math.floor(rect.y * canvas.height / (displayPixelRatio * canvas.clientHeight));
rect.width = Math.floor(rect.width * canvas.width / (displayPixelRatio * canvas.clientWidth));
rect.height = Math.floor(rect.height * canvas.height / (displayPixelRatio * canvas.clientHeight));
}
}
else {
rect.x = Math.floor(rect.x * canvas.width);
rect.y = Math.floor(rect.y * canvas.height);
rect.width = Math.floor(rect.width * canvas.width);
rect.height = Math.floor(rect.height * canvas.height);
if (rect.assumeClientRect) {
console.warn('CanvasSnapshot: rect.assumeClientRect is ignored when rect is normalized');
}
}
destCanvas.width = Math.floor(rect.width * scale * displayPixelRatio);
destCanvas.height = Math.floor(rect.height * scale * displayPixelRatio);
const destCtx = destCanvas.getContext('2d');
if (!destCtx) {
console.error('snapshot: cannot create context');
return destCanvas;
}
// console.log(canvas.style.background)
const background = canvas.style.background || canvas.parentElement?.style.background || '';
if (background.includes('url')) {
const url = /url\("(.*)"\)/ig.exec(background)?.[1];
if (url) {
const img = new Image();
img.src = url;
await new Promise((resolve, reject) => {
img.onload = () => resolve();
img.onerror = () => reject();
if (img.complete)
resolve();
});
destCtx.drawImage(img, Math.floor(img.width * rect.x * displayPixelRatio / canvas.width), Math.floor(img.height * rect.y * displayPixelRatio / canvas.height), Math.floor(img.width * rect.width * displayPixelRatio / canvas.width), Math.floor(img.height * rect.height * displayPixelRatio / canvas.height), 0, 0, destCanvas.width, destCanvas.height);
}
}
else {
destCtx.fillStyle = canvas.style.background || canvas.parentElement?.style.backgroundColor || '#00000000';
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
}
destCtx?.drawImage(canvas, Math.floor(rect.x * displayPixelRatio), Math.floor(rect.y * displayPixelRatio), Math.floor(rect.width * displayPixelRatio), Math.floor(rect.height * displayPixelRatio), 0, 0, destCanvas.width, destCanvas.height);
const debug = this.Debug;
if (debug) {
// console.log(
// destCanvas,
// )
document.body.appendChild(destCanvas);
destCanvas.style.position = 'absolute';
destCanvas.style.top = '0';
destCanvas.style.left = '0';
destCanvas.style.borderWidth = '2px';
destCanvas.style.borderColor = '#ff00ff';
setTimeout(() => destCanvas.remove(), 5000);
}
return destCanvas;
}
static async GetDataUrl(canvas, { mimeType = 'image/png', quality, ...options }) {
const doClone = isSafari() || options.cloneCanvas || options.rect || options.scale || options.displayPixelRatio;
if (!doClone && (options.rect || options.scale || options.displayPixelRatio))
console.warn('CanvasSnapshot: rect, scale and displayPixelRatio are ignored when cloneCanvas is false');
const clone = !doClone ? canvas : await this.GetClonedCanvas(canvas, options);
// const clone = options.cloneCanvas === false ? canvas : await this.GetClonedCanvas(canvas, options)
const url = clone.toDataURL(mimeType, quality);
if (!this.Debug && clone !== canvas)
clone.remove();
return url;
}
// set one of canvas or context to draw in.
static async GetImage(canvas, options = {}) {
const imgUrl = await this.GetDataUrl(canvas, options);
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = () => reject();
img.src = imgUrl;
});
}
static async GetBlob(canvas, options = {}) {
const doClone = isSafari() || options.cloneCanvas || options.rect || options.scale || options.displayPixelRatio;
if (!doClone && (options.rect || options.scale || options.displayPixelRatio))
console.warn('rect, scale and displayPixelRatio are ignored when cloneCanvas is false');
const clone = !doClone ? canvas : await this.GetClonedCanvas(canvas, options);
// const clone = options.cloneCanvas === false ? canvas : await this.GetClonedCanvas(canvas, options)
const blob = await new Promise((resolve, reject) => {
clone.toBlob((b) => {
if (b)
resolve(b);
else
reject(new Error('CanvasSnapshot Failed to export blob from canvas'));
}, options.mimeType ?? 'image/png', options.quality);
});
if (!this.Debug && clone !== canvas)
clone.remove();
return blob;
}
static async GetFile(canvas, filename = 'image', options = {}) {
const suffix = '.' + (options.mimeType?.split('/')[1]?.toLowerCase() || 'png');
const fname = !filename.toLowerCase().endsWith(suffix) ? filename + suffix : filename;
return options.getDataUrl ? await this.GetDataUrl(canvas, options) : new File([await this.GetBlob(canvas, options)], fname, {
type: options.mimeType ?? 'image/png',
lastModified: now(),
});
}
static async GetTiledFiles(canvas, filePrefix = 'image', tileRows = 2, tileCols = 2, options = {}) {
const rect = options.rect ?? { x: 0, y: 0, width: 1, height: 1, assumeClientRect: false, normalized: true };
// rect.width *= options.displayPixelRatio ?? 1
// rect.height *= options.displayPixelRatio ?? 1
const files = [];
for (let i = 0; i < tileCols; i++) {
for (let j = 0; j < tileRows; j++) {
const ext = options.mimeType?.split('/')[1] ?? 'png';
const file = await this.GetFile(canvas, `${filePrefix}_${i}_${j}.${ext}`, {
rect: {
x: rect.x + i * rect.width / tileCols,
y: rect.y + j * rect.height / tileRows,
width: rect.width / tileCols,
height: rect.height / tileRows,
assumeClientRect: rect.assumeClientRect,
normalized: rect.normalized,
},
}).catch(e => {
console.error(`CanvasSnapshot - Error exporting tiled file ${i}, ${j}`, e);
return null;
});
if (file)
files.push(file);
}
}
return files;
}
}
CanvasSnapshot.Debug = false;
//# sourceMappingURL=canvas-snapshot.js.map