101 lines
2.5 KiB
JavaScript
101 lines
2.5 KiB
JavaScript
window.getElementSize = (element) => {
|
|
return {
|
|
width: element.clientWidth,
|
|
height: element.clientHeight,
|
|
};
|
|
}
|
|
|
|
window.setCanvasSize = (canvas, width, height) => {
|
|
canvas.width = width;
|
|
canvas.height = height;
|
|
}
|
|
|
|
// Image loading and caching functionality
|
|
window.imageCache = new Map();
|
|
|
|
window.preloadImage = (imagePath) => {
|
|
return new Promise((resolve, reject) => {
|
|
if (window.imageCache.has(imagePath)) {
|
|
resolve(window.imageCache.get(imagePath));
|
|
return;
|
|
}
|
|
|
|
const img = new Image();
|
|
img.onload = () => {
|
|
window.imageCache.set(imagePath, img);
|
|
resolve(img);
|
|
};
|
|
img.onerror = () => {
|
|
reject(new Error(`Failed to load image: ${imagePath}`));
|
|
};
|
|
img.src = imagePath;
|
|
});
|
|
};
|
|
|
|
window.preloadImageFromUrl = (url, cacheKey) => {
|
|
return new Promise((resolve, reject) => {
|
|
if (window.imageCache.has(cacheKey)) {
|
|
resolve(window.imageCache.get(cacheKey));
|
|
return;
|
|
}
|
|
|
|
const img = new Image();
|
|
img.onload = () => {
|
|
window.imageCache.set(cacheKey, img);
|
|
resolve(img);
|
|
};
|
|
img.onerror = (error) => {
|
|
reject(new Error(`Failed to load image from URL: ${url}`));
|
|
};
|
|
|
|
// Don't set crossOrigin for same-origin requests
|
|
// Only set it if you're loading from a different domain
|
|
// img.crossOrigin = 'anonymous';
|
|
|
|
img.src = url;
|
|
});
|
|
};
|
|
|
|
window.getImageDimensions = (cacheKey) => {
|
|
const img = window.imageCache.get(cacheKey);
|
|
if (!img) {
|
|
return { width: 0, height: 0 };
|
|
}
|
|
|
|
return {
|
|
width: img.naturalWidth || img.width,
|
|
height: img.naturalHeight || img.height
|
|
};
|
|
};
|
|
|
|
window.drawImageOnCanvas = (canvas, imagePath, x, y, width, height) => {
|
|
const ctx = canvas.getContext('2d');
|
|
const img = window.imageCache.get(imagePath);
|
|
|
|
if (!img) {
|
|
return false;
|
|
}
|
|
|
|
try {
|
|
ctx.drawImage(img, x, y, width, height);
|
|
return true;
|
|
} catch (error) {
|
|
return false;
|
|
}
|
|
};
|
|
|
|
window.drawCachedImageOnCanvas = (canvas, cacheKey, x, y, width, height) => {
|
|
const ctx = canvas.getContext('2d');
|
|
const img = window.imageCache.get(cacheKey);
|
|
|
|
if (!img) {
|
|
return false;
|
|
}
|
|
|
|
try {
|
|
ctx.drawImage(img, x, y, width, height);
|
|
return true;
|
|
} catch (error) {
|
|
return false;
|
|
}
|
|
}; |