Resize image and load into sprite

From the Asset Store
Minimal Sprite Font with Stroke for Pixel Art games.
  • I need to load an external image into a sprite and allow the user to resize and crop it. I got that working pretty well with the FileChooser, DrawingCanvas, and BinaryData. But if the original image is really big the final result looks terrible.

    So, I went looking for a javascript routine that can resize an image without all the artifacts, and I found one that does a great job! I can have the script load an image and resize it, and load that into the DrawingCanvas object. But I can't find a way to send the image from Construct to the script...

    I can load an image into a sprite, paste that into the DrawingCanvas, and save that to BinaryData, and access the BinaryData object in the script, but I don't know how to load that into img.src or an ImageData variable that the script can work with.

    Is there a getImagePixelData (opposite of loadImagePixelData) for the DrawingCanvas?

    Anyone know how to get image data in the BinaryData object loaded into an img element?

    https://www.rieperts.com/games/forum/resize.c3p

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • How about:

    	let img = document.createElement("img");
    	img.src = BinaryDataObjectURL;
    

    You can get the BinaryDataObjectURL from the C3 expression: BinaryData.GetURL and pass it into scripts via localVars.* or runtime.globalVars.*

  • Example from your project:

    	function resizeImage(runtime, bURL) {
    
    	// runtime.objects.BinaryData.getFirstInstance().getArrayBufferCopy()
    	// has the image data in it, but how do we get it into an img.src or ImageData variable?
    	let img = document.createElement("img");
    	img.src = bURL;
    	ctx.drawImage(img, 0, 0);
    	HERMITE.resample(canvas, 450, 300, true);
    	console.log('[resizeImage] resample complete')
    }

    I imagine you want to do something w/ the canvas image to C3 after that...

  • Awesome! I will try that out in a few minutes.

    Thanks!

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)