Resize image and load into sprite

Post reply

❤Follow Topic(3)

0 favourites

4 posts

From the Asset Store

Gif

Resize and Rotate a sprite

$5 USD

Simple resize and rotate events for any sprite, quick and easy event sheet that you can use for your own projects.

xanderwood

- AllanR
- - Joined 21 Nov, 2013
  - 5 topics • 1,429 posts
- 1
- 27 Aug, 2020
- Quote
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
- Mikal
- - Joined 22 Apr, 2016
  - 111 topics • 1,182 posts
- 1
- 27 Aug, 2020
- Quote
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.*
Try Construct 3

Develop games in your browser. Powerful, performant & highly capable.
Try Now Construct 3 users don't see these ads

Mikal
- Joined 22 Apr, 2016
- 111 topics • 1,182 posts
1

27 Aug, 2020
Quote

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...