paper.js очистить растровое изображение и загрузить новое - PullRequest
Новая
       23

paper.js очистить растровое изображение и загрузить новое

1 голос
/ 21 мая 2019

Первый раз, используя paper.js и пытаясь позволить пользователю свободной рукой нарисовать линию над растровым изображением. Изображение загружается нормально, но ни одно из событий мыши не запускается.

Я инициализирую холст следующим образом (изображение загружается нормально): 

function initCanvas() {

    // Init paper
    $canvas = document.getElementById('canvas');

    paper.install(window);
    paper.setup($canvas);

    loadImage('http://project.com/img/image1.jpg', 'init');

}

Я загружаю свое изображение так: 

function loadImage($url, $type = 'load') {

    var $width, $height;

    var $image = new Image();
    $image.src = $url;

    $image.onload = function (imageEvent) {

        var $size = resizeImage($image);
        $width = $size.width;
        $height = $size.height;

        $($canvas).hide();

        if ($type == 'load') {
            // paper.project.clear();
            paper.project.activeLayer.removeChildren();
            paper.view.draw();
        }

        $raster = new paper.Raster({
            source: $image.src,
            position: view.center,
        });

        if ($image.width > $image.height) {
            $raster.rotate(90);
            $width = $size.height;
            $height = $size.width;
        }

        paper.view.viewSize = new Size($width, $height);
        $raster.fitBounds(paper.view.bounds);

        $canvas.width = $width;
        $canvas.height = $height;

        saveImage();

        $($canvas).fadeIn('slow');

    };

}

Когда я меняю изображение, я могу передать URL-адрес, подобный этому: 

 loadImage('http://project.com/img/image.jpg', 'load');

Или загрузите новое изображение с помощью программы чтения файлов, например: 

function loadFileReaderToCanvas() {

    // Read in file
    var fileElement = document.getElementById('photo');
    var file = fileElement.files[0];
    var filterType = /^(?:image\/jpg|image\/jpeg|image\/png)$/i;

    // Ensure it's an image
    if (!filterType.test(file.type)) {
        addFileError("Please only select images in JPG, JPEG or PNG-format");
        return;
    }

    // Load the image
    $reader = new FileReader();

    $reader.onload = function (readerEvent) {
        loadImage(readerEvent.target.result, 'load');
    };

    $reader.readAsDataURL(file);

}

Первое изображение загружается нормально.

Изображение программы чтения файлов загружается нормально (URL-адрес - B64 src) и заменяет его на холсте.

Но если я очищу ввод файла и захочу загрузить изображение по умолчанию, используя его адрес src (http://project.com/img/default.jpg), изображение не будет загружено, а холст останется пустым. Что я упустил? Спасибо

...