chore: add jimp dependency, icon padding script, and update configuration
This commit is contained in:
BIN
Binary file not shown.
|
After Width: | Height: | Size: 213 KiB |
+25
@@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Jimp browser example 1</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Demonstrates loading a local file using Jimp on the main thread</h1>
|
||||
<script src="../lib/jimp.js"></script>
|
||||
<script>
|
||||
Jimp.read(
|
||||
"https://upload.wikimedia.org/wikipedia/commons/0/01/Bot-Test.jpg"
|
||||
).then(function (lenna) {
|
||||
lenna
|
||||
.resize(256, Jimp.AUTO) // resize
|
||||
.quality(60) // set JPEG quality
|
||||
.greyscale() // set greyscale
|
||||
.getBase64(Jimp.AUTO, function (err, src) {
|
||||
var img = document.createElement("img");
|
||||
img.setAttribute("src", src);
|
||||
document.body.appendChild(img);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Jimp browser example 2</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>
|
||||
Demonstrates loading a relative file using Jimp on a WebWorker thread
|
||||
</h1>
|
||||
<script>
|
||||
var worker = new Worker("jimp-worker.js");
|
||||
worker.onmessage = function (e) {
|
||||
var img = document.createElement("img");
|
||||
img.setAttribute("src", e.data);
|
||||
document.body.appendChild(img);
|
||||
};
|
||||
worker.postMessage("lenna.png");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Jimp browser example 3</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Demonstrates loading a local file using Jimp on a WebWorker thread</h1>
|
||||
<p><input type="file" onchange="newFiles(this);" /></p>
|
||||
<script>
|
||||
function newFiles(element) {
|
||||
for (var i = 0; i < element.files.length; i++) {
|
||||
readFileAndProcess(element.files[i]);
|
||||
}
|
||||
|
||||
function readFileAndProcess(readfile) {
|
||||
var reader = new FileReader();
|
||||
reader.addEventListener("load", function () {
|
||||
var worker = new Worker("jimp-worker.js");
|
||||
worker.onmessage = function (e) {
|
||||
var img = document.createElement("img");
|
||||
img.setAttribute("src", e.data);
|
||||
document.body.appendChild(img);
|
||||
};
|
||||
worker.postMessage(this.result);
|
||||
});
|
||||
reader.readAsArrayBuffer(readfile);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+74
@@ -0,0 +1,74 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Jimp browser example 4</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Demonstrates how to write a text over an image</h1>
|
||||
<script src="../lib/jimp.js"></script>
|
||||
<img id="pic" style="float: left; margin: 0px 20px 5px 0px" />
|
||||
<script>
|
||||
function writePic() {
|
||||
Jimp.read("lenna.png")
|
||||
.then(function (lenna) {
|
||||
var fntName = "FONT_SANS_" + fntSize.value + "_" + txtColor.value;
|
||||
var x = parseInt(txtX.value);
|
||||
var y = parseInt(txtY.value);
|
||||
var w = parseInt(txtW.value);
|
||||
console.log();
|
||||
Jimp.loadFont(Jimp[fntName])
|
||||
.then(function (font) {
|
||||
lenna
|
||||
.print(font, x, y, txtField.value, w)
|
||||
.getBase64(Jimp.AUTO, function (err, src) {
|
||||
if (err) {
|
||||
alert(err.message);
|
||||
throw err;
|
||||
}
|
||||
pic.setAttribute("src", src);
|
||||
});
|
||||
})
|
||||
.catch(function (err) {
|
||||
throw err;
|
||||
});
|
||||
})
|
||||
.catch(function (err) {
|
||||
alert("Image load fail.\n" + err.message);
|
||||
throw err;
|
||||
});
|
||||
return false;
|
||||
}
|
||||
writePic();
|
||||
</script>
|
||||
<textarea rows="4" cols="80" id="txtField">Hi! I'm Lenna.</textarea>
|
||||
<br />
|
||||
<label
|
||||
>Size:
|
||||
<select id="fntSize">
|
||||
<option>8</option>
|
||||
<option>16</option>
|
||||
<option>32</option>
|
||||
<option>64</option>
|
||||
<option>128</option>
|
||||
</select></label
|
||||
>
|
||||
<br />
|
||||
<label
|
||||
>Color:
|
||||
<select id="txtColor">
|
||||
<option>BLACK</option>
|
||||
<option>WHITE</option>
|
||||
</select></label
|
||||
>
|
||||
<br />
|
||||
<label>pos X: <input id="txtX" value="0" size="3" />px</label> <br />
|
||||
<label>pos Y: <input id="txtY" value="0" size="3" />px</label> <br />
|
||||
<label>max Width: <input id="txtW" value="400" size="3" />px</label> <br />
|
||||
<input
|
||||
type="button"
|
||||
id="btWrite"
|
||||
onclick="writePic(); return false"
|
||||
value="Write"
|
||||
/>
|
||||
</body>
|
||||
</html>
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
/* eslint-env worker */
|
||||
/* global Jimp */
|
||||
|
||||
importScripts("../lib/jimp.js");
|
||||
|
||||
self.addEventListener("message", (e) => {
|
||||
Jimp.read(e.data).then((lenna) => {
|
||||
lenna
|
||||
.resize(256, Jimp.AUTO) // resize
|
||||
.quality(60) // set JPEG quality
|
||||
.greyscale() // set greyscale
|
||||
.getBase64(Jimp.AUTO, (err, src) => {
|
||||
if (err) throw err;
|
||||
self.postMessage(src);
|
||||
self.close();
|
||||
});
|
||||
});
|
||||
});
|
||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 463 KiB |
+49
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Jimp browser example 1</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Demonstrates loading a local file using Jimp on the main thread -->
|
||||
<script src="../lib/jimp.js"></script>
|
||||
<script>
|
||||
function dropShadow(x, y, b, a) {
|
||||
var img = new Jimp(
|
||||
this.bitmap.width + Math.abs(x * 2) + b * 2,
|
||||
this.bitmap.height + Math.abs(y * 2) + b * 2
|
||||
);
|
||||
var orig = this.clone();
|
||||
this.scan(
|
||||
0,
|
||||
0,
|
||||
this.bitmap.width,
|
||||
this.bitmap.height,
|
||||
function (x, y, idx) {
|
||||
this.bitmap.data[idx + 0] = 0;
|
||||
this.bitmap.data[idx + 1] = 0;
|
||||
this.bitmap.data[idx + 2] = 0;
|
||||
this.bitmap.data[idx + 3] = this.bitmap.data[idx + 3] * a;
|
||||
}
|
||||
);
|
||||
// this.resize(this.bitmap.width + Math.abs(x) + b, this.bitmap.height + Math.abs(y) + b);
|
||||
|
||||
var x1 = Math.max(x * -1, 0) + b;
|
||||
var y1 = Math.max(y * -1, 0) + b;
|
||||
img.composite(this, x1, y1);
|
||||
img.blur(b);
|
||||
img.composite(orig, x1 - x, y1 - y);
|
||||
//img.autocrop();
|
||||
return img;
|
||||
}
|
||||
Jimp.read("dice.png").then(function (img) {
|
||||
console.log(img.getMIME(), img.getExtension());
|
||||
var img = dropShadow.call(img, 20, 20, 20, 0.3);
|
||||
img.getBase64(Jimp.AUTO, function (err, src) {
|
||||
var img = document.createElement("img");
|
||||
img.setAttribute("src", src);
|
||||
document.body.appendChild(img);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user