mmo-ref/stendhal
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

optimized image creation

Browse source
This commit is contained in:
Hendrik Brummermann 2026-01-31 23:10:42 +01:00
parent 5f4d9d9460
commit f109b551f5
1 changed files with 25 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

51
src/js/stendhal/sprite/image/HTMLImageElementUtil.ts
View file

@ -9,6 +9,7 @@
* *
***************************************************************************/
import { ImageWithDimensions } from "data/ImageWithDimensions";
import { store } from "../../data/SpriteStore";
export class HTMLImageElementUtil {
@ -19,39 +20,37 @@ export class HTMLImageElementUtil {
* Otherwise <em>a copy</em> of the image data is returned. This is meant
* to be used for obtaining the drag image for drag and drop.
*
* This method intentionally returns an HTMLImageElement because Chrome is
* not able to use an HTMLCanvasElement as drag image. Firefox does support
* this. But neither browser is able to use an ImageBitmap.
*
* @param image original image
* @param width width of the area
* @param height height of the area
* @param {number=} offsetX optional. left x coordinate of the area
* @param {number=} offsetY optional. top y coordinate of the area
*/
static getAreaOf(image: HTMLImageElement, width: number, height: number,
static getAreaOf(image: CanvasImageSource & ImageWithDimensions, width: number, height: number,
offsetX?: number, offsetY?: number): any {
try {
offsetX = offsetX || 0;
offsetY = offsetY || 0;
if ((image.width === width) && (image.height === height)
&& (offsetX === 0) && (offsetY === 0)) {
return image;
}
var canvas = document.createElement("canvas") as HTMLCanvasElement;
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d")!;
ctx.drawImage(image, offsetX, offsetY, width, height, 0, 0, width, height);
// Firefox would be able to use the canvas directly as a drag image, but
// Chrome does not. This should work in any standards compliant browser.
// TODO: Check if that is still true
var newImage = new Image();
newImage.src = canvas.toDataURL("image/png");
return newImage;
} catch (err) {
if (err instanceof DOMException) {
return store.getFailsafe();
} else {
// don't ignore other errors
throw err;
}
offsetX = offsetX || 0;
offsetY = offsetY || 0;
if (image instanceof HTMLImageElement
&& (image.width === width) && (image.height === height)
&& (offsetX === 0) && (offsetY === 0)) {
return image;
}
let canvas = document.createElement("canvas") as HTMLCanvasElement;
canvas.width = width;
canvas.height = height;
let ctx = canvas.getContext("2d", {willReadFrequently: true})!;
try {
ctx.drawImage(image, offsetX, offsetY, width, height, 0, 0, width, height);
} catch (err) {
ctx.drawImage(store.getFailsafe(), 0, 0);
}
let newImage = new Image();
newImage.src = canvas.toDataURL("image/png");
return newImage;
}
}