[SOLVED] How I can get imageData (Uint8ClampedArray)?

  • Hi all!

    AshleyR0J0hound

    I choose png image via file chooser plugin and I can get dataURI of this image file, but I want to get imageData (Uint8ClampedArray) of this image file. How I can do it?

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • Construct only deals with numbers and text. You’ll have to do it via JavaScript. You could make it into a plugin later if you like.

    Anyways it’s a straight JavaScript problem. Roughly you do this.

    1. Create a image

    2. Set the source to the data url.

    3. When it loads, create a canvas, and draw the image to it.

    4. The canvas then has a function to get the image data array.

    I don’t know any of the syntax exactly offhand but it’s something you can find online.

  • Hi R0J0hound

    Thank you for answer! This is my solution for getting imageData via converting Blob from File chooser plugin:

    -> On file chooser changed: Browser execute javascript:

    	"function convertURIToImageData(URI) {
     return new Promise(function(resolve, reject) {
     if (URI == null) return reject();
     var canvas = document.createElement('canvas'),
     context = canvas.getContext('2d'),
     image = new Image();
     image.addEventListener('load', function() {
     canvas.width = image.width;
     canvas.height = image.height;
     context.drawImage(image, 0, 0, canvas.width, canvas.height);
     resolve(context.getImageData(0, 0, canvas.width, canvas.height));
     }, false);
     image.src = URI;
     });
    }
    var URI ='"&FileChooser.FileURLAt(0)&"';
    convertURIToImageData(URI).then(function(imageData) {
     console.log(imageData);
    });"
    
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)