mirror of
https://github.com/publiclab/image-sequencer.git
synced 2025-12-15 12:50:04 +01:00
Added Text Overlay module (#917)
This commit is contained in:
@@ -34,6 +34,7 @@ module.exports = {
|
|||||||
'resize': require('./modules/Resize'),
|
'resize': require('./modules/Resize'),
|
||||||
'rotate': require('./modules/Rotate'),
|
'rotate': require('./modules/Rotate'),
|
||||||
'saturation': require('./modules/Saturation'),
|
'saturation': require('./modules/Saturation'),
|
||||||
|
'text-overlay': require('./modules/TextOverlay'),
|
||||||
'threshold': require('./modules/Threshold'),
|
'threshold': require('./modules/Threshold'),
|
||||||
'tint': require('./modules/Tint'),
|
'tint': require('./modules/Tint'),
|
||||||
'color-temperature': require('./modules/ColorTemperature')
|
'color-temperature': require('./modules/ColorTemperature')
|
||||||
|
|||||||
51
src/modules/TextOverlay/Module.js
Normal file
51
src/modules/TextOverlay/Module.js
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
|
||||||
|
module.exports = function TextOverlay(options,UI) {
|
||||||
|
|
||||||
|
var output;
|
||||||
|
|
||||||
|
function draw(input, callback, progressObj) {
|
||||||
|
|
||||||
|
progressObj.stop(true);
|
||||||
|
progressObj.overrideFlag = true;
|
||||||
|
|
||||||
|
var step = this;
|
||||||
|
if (!options.step.inBrowser) { // This module is only for browser
|
||||||
|
this.output = input;
|
||||||
|
callback();
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
var priorStep = this.getStep(-1); // get the previous step to add text onto it.
|
||||||
|
|
||||||
|
function extraManipulation(pixels) {
|
||||||
|
//if (options.step.inBrowser)
|
||||||
|
pixels = require('./TextOverlay')(pixels, options,priorStep);
|
||||||
|
return pixels
|
||||||
|
}
|
||||||
|
|
||||||
|
function output(image, datauri, mimetype) {
|
||||||
|
|
||||||
|
// This output is accesible by Image Sequencer
|
||||||
|
step.output = { src: datauri, format: mimetype };
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
return require('../_nomodule/PixelManipulation.js')(input, {
|
||||||
|
output: output,
|
||||||
|
extraManipulation: extraManipulation,
|
||||||
|
format: input.format,
|
||||||
|
image: options.image,
|
||||||
|
inBrowser: options.inBrowser,
|
||||||
|
callback: callback
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
options: options,
|
||||||
|
draw: draw,
|
||||||
|
output: output,
|
||||||
|
UI: UI
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
25
src/modules/TextOverlay/TextOverlay.js
Normal file
25
src/modules/TextOverlay/TextOverlay.js
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
module.exports = exports = function(pixels, options,priorstep){
|
||||||
|
var defaults = require('./../../util/getDefaults.js')(require('./info.json'));
|
||||||
|
|
||||||
|
options.text = options.text || defaults.text;
|
||||||
|
options.x = options.x || defaults.x;
|
||||||
|
options.y = options.y || defaults.y;
|
||||||
|
options.font = options.font || defaults.font;
|
||||||
|
options.color = options.color || defaults.color;
|
||||||
|
options.size = options.size || defaults.size;
|
||||||
|
|
||||||
|
|
||||||
|
var img = $(priorstep.imgElement);
|
||||||
|
var canvas = document.createElement("canvas");
|
||||||
|
canvas.width = pixels.shape[0]; //img.width();
|
||||||
|
canvas.height = pixels.shape[1]; //img.height();
|
||||||
|
var ctx = canvas.getContext('2d');
|
||||||
|
ctx.drawImage(img[0], 0, 0);
|
||||||
|
ctx.fillStyle = options.color;
|
||||||
|
ctx.font = options.size +"px " + options.font;
|
||||||
|
ctx.fillText(options.text, options.x, options.y);
|
||||||
|
|
||||||
|
var myImageData = ctx.getImageData(0,0,canvas.width,canvas.height);
|
||||||
|
pixels.data = myImageData.data
|
||||||
|
return pixels;
|
||||||
|
}
|
||||||
4
src/modules/TextOverlay/index.js
Normal file
4
src/modules/TextOverlay/index.js
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
module.exports = [
|
||||||
|
require('./Module'),
|
||||||
|
require('./info.json')
|
||||||
|
]
|
||||||
53
src/modules/TextOverlay/info.json
Normal file
53
src/modules/TextOverlay/info.json
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
{
|
||||||
|
"name": "Text-Overlay",
|
||||||
|
"description": "Overlay text on image.",
|
||||||
|
"inputs": {
|
||||||
|
"text": {
|
||||||
|
"type": "string",
|
||||||
|
"desc": "Enter the text to overlay.",
|
||||||
|
"default": "Lorem ipsum"
|
||||||
|
},
|
||||||
|
"x": {
|
||||||
|
"type": "integer",
|
||||||
|
"desc": "Starting text horizontal position.",
|
||||||
|
"default": "20"
|
||||||
|
},
|
||||||
|
"y": {
|
||||||
|
"type": "integer",
|
||||||
|
"desc": "Starting text vertical position.",
|
||||||
|
"default": "20"
|
||||||
|
},
|
||||||
|
"font": {
|
||||||
|
"type": "select",
|
||||||
|
"desc": "Select the font style.",
|
||||||
|
"default": "serif",
|
||||||
|
"values": [
|
||||||
|
"serif",
|
||||||
|
"arial",
|
||||||
|
"times",
|
||||||
|
"courier",
|
||||||
|
"Montserrat"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"color": {
|
||||||
|
"type": "select",
|
||||||
|
"desc": "Select the text color.",
|
||||||
|
"default": "black",
|
||||||
|
"values": [
|
||||||
|
"black",
|
||||||
|
"blue",
|
||||||
|
"green",
|
||||||
|
"red",
|
||||||
|
"white",
|
||||||
|
"pink",
|
||||||
|
"orange"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"size": {
|
||||||
|
"type" : "integer",
|
||||||
|
"desc": "Enter the font size in pixels.",
|
||||||
|
"default": "12"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"only": "browser"
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user