Using Jimp to write images

Adobe XD UXP Plugin API
1

I use Jimp to crop image and want to write to folder, but there is an error, Error: Cant access the filesystem. You can use the getBase64 method. Then I use getBase64 mathod,my code here:

Jimp.read("./S_10.png")
.then(function (images) {

    // do stuff with the image
    console.log(images);

    images.crop(11,33,80,80);
    console.log(images);

    images.getBase64(Jimp.AUTO,function(err,data){
        console.log(data);
        
    });
    // images.write(imgfile);
}).catch(function (err) {
    // handle an exception
    console.log("ERR: ",err);
});

But how to use getBase64 write to a PNG file?

2

Welcome to the community. Unfortunately, using base64 is not supported currently. Have you tried saving the file by using the Storage API?

3

Thank you. I want to cut the image according to the coordinates given, XD API can save image, but it can’t cut image? So is there a plugin or API to cut image according to the coordinates given in XD?

4

You could use a mask group to crop the image, and then use a rendition of the whole mask group to get the cropped image.

5

Thanks, what about binary? Is binary file supported in XD?

6

Yes, you can read and write binary files.

7

Thanks, but if I get the base64 code , how to write it to imge in XD?
Now, I want to do such a work with plugin, first read an image, then cut the image according the coordinates, and finally save the cropped image.Can such a plug-in be implemented?

8

Take a look at this part of the documentation: https://adobexdplatform.com/plugin-docs/reference/ImageFill.html#imagefill

9

ok, there is another error Plugin Error: Plugin 11 is not permitted to make changes from the background. Return a Promise to continue execution asynchronously. at convertPluginErrorToString (plugins/PluginErrorUtil.js:1:198) at internalFormatPluginError (plugins/PluginErrorUtil.js:1:1065) at internalReportPluginError (plugins/PluginErrorUtil.js:1:1172) at Object.reportPluginError (plugins/PluginErrorUtil.js:1:1604) at Object.checkAllowedToEdit (plugins/ScenegraphGuard.js:1:1418) at Rectangle.<anonymous> (plugins/ScenegraphWrappers.js:1:2400) how to solve it? Thanks.

10

This is a pretty broad error. We will look into your code to debug further. Feel free to send your repo url to me via message if you don’t want to share the code here.

1 Like