thedesk/app/node_modules/jimp/browser
2019-09-12 23:38:13 +09:00
..
examples Add: node_modules 2019-09-12 23:38:13 +09:00
lib Add: node_modules 2019-09-12 23:38:13 +09:00
.editorconfig Add: node_modules 2019-09-12 23:38:13 +09:00
README.md Add: node_modules 2019-09-12 23:38:13 +09:00

Jimp ... in a browser

Browser support for Jimp was added by Phil Seaton. This enabled Jimp to be used in Electron applications as well as web browsers.

Example usage:

<script src="jimp.min.js"></script>
<script>
Jimp.read("lenna.png").then(function (lenna) {
    lenna.resize(256, 256)            // resize
         .quality(60)                 // set JPEG quality
         .greyscale()                 // set greyscale
         .getBase64(Jimp.MIME_JPEG, function (err, src) {
              var img = document.createElement("img");
              img.setAttribute("src", src);
              document.body.appendChild(img);
         });
}).catch(function (err) {
    console.error(err);
});
</script>

See the main documentation for the full API documenatinon.

WebWorkers

For better performance, it recommended that Jimp methods are run on a separate thread using WebWorkers. The following shows how using two files (index.html and jimp-worker.js):

// index.html

var worker = new Worker('jimp-worker.js');
worker.onmessage = function(e) {
  // append a new img element using the base 64 image
  var img = document.createElement('img');
  img.setAttribute('src', e.data);
  document.body.appendChild(img);
};
worker.postMessage('lenna.png'); // message the worker thread
// jimp-worker.js

importScripts('jimp.min.js');

self.addEventListener('message', function(e) {
  Jimp.read(e.data).then(function(lenna) {
    lenna
      .resize(256, 256) // resize
      .quality(60) // set JPEG quality
      .greyscale() // set greyscale
      .getBase64(Jimp.MIME_JPEG, function(err, src) {
        self.postMessage(src); // message the main thread
      });
  });
});

License

Jimp is licensed under the MIT license.