В настоящее время я использую http://paperjs.org, чтобы создать приложение для рисования холста HTML5. Я хочу, чтобы пользователи загружали изображения в холст. Я знаю, что мне нужно сделать логин и регистрацию, но есть ли более простой способ? Я видел перетаскивание и перенос HTML5.
Как загрузить изображение в холст HTML5
Ответ 1
Я предполагаю, что вы имеете в виду, чтобы загрузить изображение в холст и не загружать изображение с холста.
Вероятно, было бы неплохо прочитать все материалы холста, которые у них есть здесь https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images
Но в основном то, что вы хотите сделать, это создать образ в javascript и установить image.src= в любом месте файла. В случае загрузки изображений с пользователя на их конце вам понадобится использовать API файловой системы.
Вкратце приведенный здесь краткий пример: http://jsfiddle.net/influenztial/qy7h5/
function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.onload = function(){
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img,0,0);
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
Ответ 2
<script>
window.onload = function() {
var canvas=document.getElementById("drawing"); // grabs the canvas element
var context=canvas.getContext("2d"); // returns the 2d context object
var img=new Image() //creates a variable for a new image
img.src= "images/vft.jpg" // specifies the location of the image
context.drawImage(img,20,20); // draws the image at the specified x and y location
}
</script>
Отметьте Демо