I use Paper.js to draw images, add text, etc. Then I need to take the whole sketch on the image and send it back to the server. In particular, I am having problems rasterizing paths. I'm trying to use
paper.project.layers[0].rasterize();
but when I do this on the image, I do not get the lines to rasterize. I end up being
data:,
instead of a base64 encoded image with the prefix "data: image / png; base64". Here's the Paper.js sketch where I work. To use it, click several times around the kitten to draw several lines. When you have two lines, a new window will open showing the rasterized image with the red lines that you drew.
It works in a sketch, but not in my own code.
Here is my React class that controls the pattern:
var DrawingTools = React.createClass({ componentDidUpdate: function() { // Initial path object, will be reset for new paths after Alt is released var path = this.newPath(); // On mousedown add point to start from paper.project.layers[0].on('mousedown', function(event) { if(event.event.altKey && !event.event.ctrlKey) { // Alt key to add a path, but disallow attempting to add text at the same time if(path.lastSegment == null) { path.add(event.point, event.point); } else { path.add(path.lastSegment.point, path.lastSegment.point) } } }); // On mousedrag add points to path paper.project.layers[0].on('mousedrag', function(event) { if(event.event.altKey && !event.event.ctrlKey) { // Alt key to add a path, but disallow attempting to add text at the same time if(event.event.shiftKey) { // Use shift key for freeform path.add(event.point); } else { // Default of straight line added to path path.lastSegment.point = event.point; } } }.bind(this)); // Each time Alt comes up, start a new path var tool = new paper.Tool(); tool.onKeyUp = function(event) { if(event.key == "option") { path.onMouseEnter = this.props.movableEvents.showSelected; path.onMouseDrag = this.props.movableEvents.dragItem; path.onMouseLeave = this.props.movableEvents.hideSelected; // Start a new path path = this.newPath(); } }.bind(this); }, newPath: function() { var path = new paper.Path(); path.strokeColor = 'black'; path.strokeWidth = 10; return path; }, render: function() { // Someday colors will go here, or thickness controls, etc. return ( <div> </div> ); } }); module.exports = DrawingTools;
And here is the code that performs the rasterization:
var layerAsRaster = paper.project.layers[0].rasterize(); // TODO flatten layers when have multiple layers // Layer to Paper.js Raster object var dataString = layerAsRaster.toDataURL(); console.log(dataString);
So rasterization works to add PointTexts , but not Paths. Why is this? What is wrong with my code, not the sketch?