src/renderer/canvas/ImageRenderer.js
import { drawModel } from './CanvasRenderer';
import * as InkModel from '../../model/InkModel';
function createCanvas(borderCoordinates, margin = 10) {
// eslint-disable-next-line no-undef
const browserDocument = document;
const canvas = browserDocument.createElement('canvas');
canvas.width = Math.abs(borderCoordinates.maxX - borderCoordinates.minX) + (2 * margin);
canvas.style.width = `${canvas.width}px`;
canvas.height = Math.abs(borderCoordinates.maxY - borderCoordinates.minY) + (2 * margin);
canvas.style.height = `${canvas.height}px`;
return canvas;
}
/**
* Generate a PNG image data url from the model
* @param {Model} model Current model
* @param {Stroker} stroker Current stroker
* @param {Number} [margin=10] Margins to apply around the image
* @return {String} Image data string result
*/
export function getImage(model, stroker, margin = 10) {
if (model.rawStrokes.length > 0) {
const borderCoordinates = InkModel.getBorderCoordinates(model);
const capturingCanvas = createCanvas(borderCoordinates, margin);
const renderingCanvas = createCanvas(borderCoordinates, margin);
const renderStructure = {
renderingCanvas,
renderingCanvasContext: renderingCanvas.getContext('2d'),
capturingCanvas,
capturingCanvasContext: capturingCanvas.getContext('2d')
};
// Change canvas origin
renderStructure.renderingCanvasContext.translate(-borderCoordinates.minX + margin, -borderCoordinates.minY + margin);
drawModel(renderStructure, model, stroker);
return renderStructure.renderingCanvas.toDataURL('image/png');
}
return null;
}