Добавьте изображение на холст с помощью бумажного JS

Я использовал обычный javascript для добавления изображения на холст, и это код

var canvas = document.getElementById('canvas');
context = canvas.getContext('2d');

canvas_image();

function canvas_image(){
    can_img = new Image();
    can_img.src = 'Chrysanthemum.jpg';
    can_img.onload = function(){
    context.drawImage(can_img, 100, 100);   
    }
}

Как добавить изображение на холст с помощью библиотеки paperJS?


javascript html5-canvas paperjs
person chiyango    schedule 01.06.2013    source источник
comment
PaperJS предоставляет учебные пособия. Ты их видел?   -  person Šime Vidas    schedule 01.06.2013
comment
Да, я упомянул об этом, но не смог найти добавление изображения на холст. Можно ли добавить изображение на холст без тега изображения в paperJS, как указано выше.   -  person chiyango    schedule 01.06.2013
comment
paperjs.org/reference/raster#raster-id   -  person Šime Vidas    schedule 01.06.2013

Ответы (2)


arrow_upward
9
arrow_downward

Цитата из учебника paperjs.org по растрам:

Изображения должны быть уже загружены, когда они добавляются в проект Paper.js. Работа с локальными изображениями или изображениями, размещенными на других веб-сайтах, может вызывать исключения безопасности в определенных браузерах.

Итак, вам нужно где-то изображение, которое желательно визуально скрыто:

<img id="mona" class="visuallyhidden" src="mona.jpg" width="320" height="491">

А код PaperScript может выглядеть так:

// Create a raster item using the image tag with id="mona"
var raster = new Raster('mona');

Затем вы можете изменить положение, масштабировать или повернуть так:

// Move the raster to the center of the view
raster.position = view.center;

// Scale the raster by 50%
raster.scale(0.5);

// Rotate the raster by 45 degrees:
raster.rotate(45);

And here is a paperjs .org эскиз для экспериментов.

person Christoph    schedule 25.01.2014

arrow_upward
2
arrow_downward

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

paper.install(window);
window.onload = function() {
    // Setup directly from canvas id:
    paper.setup('myCanvas');
    var raster = new paper.Raster({source: 'Chrysanthemum.jpg', position: view.center});
}
person Bhavik Shah    schedule 18.06.2015