Paper.js Rasterize Layer Fails

Question

Я использую Paper.js для рисования изображений, добавления текста и т. Д. Затем мне нужно взять весь эскиз на изображении и отправить его обратно на сервер. В частности, у меня возникают проблемы с растрированием путей. Я пытаюсь использовать

paper.project.layers[0].rasterize(); 

, но когда я делаю это на изображении, я не получаю строку растеризации. Я в конечном итоге с

data:, 

вместо base64 закодирован изображения с приставкой что-то вроде «данные: изображения/PNG; base64». Вот Paper.js sketch, где у меня это работает. Чтобы использовать его, щелкните несколько раз вокруг котенка, чтобы нарисовать несколько строк. Когда у вас есть две строки, откроется новое окно, показывающее растрированное изображение с красными линиями, которые вы нарисовали.

Он работает в эскизе, но не в моем собственном коде.

Вот мой Реагировать класс, который управляет рисунок:

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; 

А вот код, который делает растеризации:

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); 

Так растеризации работает для добавления PointTexts, но не для Путей. Почему это? Что не так с моим кодом, а не с эскизом?

Answer 1

Я думаю, что вы идете о своей проблеме неправильно. Возможно, лучший способ - сохранить точки, которые пользователь нажимает, а затем отправить эти данные на сервер, вы знаете, что они всегда будут формировать прямые линии. Также оптимизирует доступ к сети.