Skip to main content
Question

Create an Image from pixel array

Antoine_Zurcher

Hi,

I am trying to create an image (in black and white) by using an array of pixels from a JSON file, but I get the error: ‘Image type is unsupported’. Here is the code I used:

      const dimensions = [imageArray.length, imageArray[0].length];
      var width = dimensions[1],
        height = dimensions[0],
        buffer = new Uint8ClampedArray(width * height * 4); // have enough bytes
      for(var y = 0; y < height; y++) {
                for(var x = 0; x < width; x++) {
                    var pos = (y * width + x) * 4; // position in buffer based on x and y
                    buffer[pos] = imageArray[y][x];           // some R value
                    buffer[pos+1] = imageArray[y][x];           // some G value
                    buffer[pos+2] = imageArray[y][x];           // some B value
                    buffer[pos+3] = 255;           // set alpha channel
                }
            }
          const image = figma.createImage(Uint8Array.from(buffer));

Where the black and white imageArray looks like:

array

How can I solve this error?

2 replies

Timj
  • Timj
  • New Member
  • 82 replies
  • April 19, 2021

The data passed in must be encoded as a PNG, JPEG, or GIF - I assume it’s missing the right header data to be one of those data types. You need to find another library or more likely an online service to convert the raw pixel data to a PNG or GIF stream first. It would be simpler to send a GIF/PNG in the JSON. Most GIF convertors are written in C for performance - there are some javascript encoders and a lot of online services like object convert Pure JavaScript HTML5 <canvas> to (Animated) GIF Conversion

Antoine_Zurcher

Thanks for your reply, but I still cannot make it work.

I decided to encode my image as PNG with base64 into my JSON file and looks like this:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFYAAABXCAIAAAARaCUFAAADUklEQVR4nO1cwZbDIAhM8vb/fzl7yNttGhWGAYymnWOrIiMYRXTd9335bPz0FLaua/X3e4dhTRLf0taEPtTEUxCi/BnZRMRQEK52FVkG62y3j/JnhBOxeSr31/8QGiuXp+AW/TOkmx3hXs1L+P3C5Qgt7PsO9qxVcv+D2oJ/SFArACWdWyurHP+ef/8v3yoMSvfYAmQFiP6XQZNVqlYXhKoW4ZkjdQqQEbj0z6o/WEYtwLGgUCA3CrorbaXl2GawwE+Hrd5YO30pjNiCXMzKgkSB0FaG/tZuRLHQpIDQPwp4+yEs1Cng9A80gZ4sVCgIGX+/pXSTZZgO1S+zpx8y6KUR0qsrBZwmHTYO9OJHrfW2QObIrtYSVr5lyf8ySGeqq2x1/SL8a6NgUsgUvBzhqfovmmopm+UBIbDwo5Y4EOLbVacllv2xO4W1nF1wSWVFaxUuWsGFUlq1mo5ArDfyFs6pe42wuWC0s0m8P9vCRjiqFQdHtcNTfhGIQKaAbZaRzHO0ihWM5tXZmNIRcCDDORMFIduZsmIMBVP7zqzHqoEgKZhIf/mcaikpwI9DPd0aCs+3AhXmPbIapTIVU0WrETFOytvHhaj/AJwpmGldkIQvBV8KyhxkOlKAfyY9R4/+oFsJ0gou4ullQof1hSoi5kBtajx/LshyhCfhEym4zA7x6VZ5ID4HCGKsYNhJlEmxeDxK89nUiMIgyOvVx1lBCXPS3QiIPe/b8BblrgzOmoA5HIHgF8+YYBJwA6skwZQxspbRwafCnGXyOXhR8KSjgRKCdllW0I1Q/7WY6w017n69KRaGFzaF5+gEevRAzZTki8+s1ms7xL/mwNmwSLqetpgSbZIMoQW8BSFPn88yuZ0Fz3yB1DrDnH3afwXFfVxsqZfWVkwmCpYkanku6Z4RnF/gD8CEaGUyHIUC2QnB3YjHalpXgQKvUervGslpDMdf5flayEbTOr9yswbkCMg3WZ7DCUYu8Zgk/Rd8LpBvSh+QeymbksAgmNejlmlKt1buk2hkasS5JWPeNRoquOLfkvJPO91ORNR+fKYzxbPoQOkzvXF2IJz6yJfuUonIM7rRH/vr4G5ZTz6+BBgZuSFtoZvI6uKnur7ujH4UDItpYod5+AWVi1Jhw514cAAAAABJRU5ErkJggg==

I tried to convert it back to PNG and it does work.

In my code, I then convert the retrieved string variable from the JSON and convert it to UTF-8 Bytes and then convert it to an Uint8Array to pass it to figma.createImage().

      const buffer = strToUtf8Bytes(json_data[i.toString()].value);
      const image = figma.createImage(Uint8Array.from(buffer));

But I still get the ‘Image type is unsupported’ error. So what should be the type of the image file? Can I actually use base64?

Reply


Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings