D3 Message Board is message board plugin powered by D3.js.
You can load image into canvas, And you can add any messages into specified area.
canvas
element has not used. This plugin has implemented with the svg element.
npm i d3-message-board --save
Html
<div id="canvas"></div>
Script
import { Board, newConfiguration } from 'd3-message-board';
// Make new configuration
const configuration = newConfiguration();
// Set canvas element selector
configuration.canvas.selector = '#canvas';
// Set background image url
configuration.canvas.backgroundImageUrl = 'https://picsum.photos/400/350';
const messageBoard = new Board(configuration);
messageBoard.init();
// Get current board configuration as json string.
const exported = messageBoard.exportConfiguration();
import { Board, loadConfiguration } from 'd3-message-board';
// Restore configuration from json string
const configuration = loadConfiguration(exported);
const messageBoard = new Board(configuration);
messageBoard.init();
configuration.canvas.readOnly = true;
- Default is false
configuration.canvas.autoResize = true;
// Set max and min size
configuration.canvas.minWidth = 400;
configuration.canvas.minHeight = 400;
configuration.canvas.maxWidth = 600;
configuration.canvas.maxHeight = 800;
- Default is true
// Enable
configuration.canvas.rectAnimation = true;
// Disable
configuration.canvas.rectAnimation = false;
- Default is true
// Enable
configuration.canvas.showGrid = true;
// Disable
configuration.canvas.showGrid = false;
- Default is true
// Set grid size
configuration.canvas.gridSize = 50;
- Default is 30
configuration.input.colors = [
'#yourOwnColorCodeHere',
'...',
'...',
'...',
'...',
]
Default coloring candidates
[
'#f48fb1',
'#ce93d8',
'#90caf9',
'#80deea',
'#a5d6a7',
'#e6ee9c',
'#ffe082',
'#ffab91',
'#bcaaa4',
'#b0bec5'
]
Enabled file upload function.
configuration.input.enableFileUpload = true;
Set file upload endpoint url.
configuration.input.fileUploadEndpoint = 'https://example.com/upload';
Required uploaded response structure.
{
"url": "https://example.com/uploaded_file.jpg";
}
Various other customizations are possible. See the dist/src/index.d.ts
file.