test.html 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Jimp browser example 1</title>
  5. </head>
  6. <body>
  7. <!-- Demonstrates loading a local file using Jimp on the main thread -->
  8. <script src="../lib/jimp.min.js"></script>
  9. <script>
  10. function dropShadow(x, y, b, a) {
  11. var img = new Jimp(this.bitmap.width + Math.abs(x*2) + (b*2), this.bitmap.height + Math.abs(y*2) + (b*2));
  12. var orig = this.clone();
  13. this.scan(0, 0, this.bitmap.width, this.bitmap.height, function (x, y, idx) {
  14. this.bitmap.data[ idx + 0 ] = 0;
  15. this.bitmap.data[ idx + 1 ] = 0;
  16. this.bitmap.data[ idx + 2 ] = 0;
  17. this.bitmap.data[ idx + 3 ] = this.bitmap.data[ idx + 3 ] * a;
  18. });
  19. // this.resize(this.bitmap.width + Math.abs(x) + b, this.bitmap.height + Math.abs(y) + b);
  20. var x1 = Math.max(x * -1, 0) + b;
  21. var y1 = Math.max(y * -1, 0) + b;
  22. img.composite(this, x1, y1);
  23. img.blur(b);
  24. img.composite(orig, x1 - x, y1 - y);
  25. //img.autocrop();
  26. return img;
  27. }
  28. Jimp.read("dice.png").then(function (img) {
  29. console.log(img.getMIME(), img.getExtension());
  30. var img = dropShadow.call(img, 20, 20, 20, 0.3)
  31. img.getBase64(Jimp.AUTO, function (err, src) {
  32. var img = document.createElement("img");
  33. img.setAttribute("src", src);
  34. document.body.appendChild(img);
  35. });
  36. });
  37. </script>
  38. </body>
  39. </html>