Create an Image from pixel array

Plugin and Widget API Questions
1

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
array1878×1489 243 KB

How can I solve this error?

2

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

3

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?