Как повторно использовать изображение из ввода изображения для рисования [дубликат]
Правильный способ - использовать .stopPropagation,
var Component = React.createClass({
handleParentClick: function() {
console.log('handleParentClick');
},
handleChildClick: function(e) {
e.stopPropagation();
console.log('handleChildClick');
},
render: function() {
return
Child
;
}
});
Ваши обработчики событий будут переданы экземплярами SyntheticEvent, кросс-браузерной оболочки вокруг собственного события браузера. Он имеет тот же интерфейс, что и собственное событие браузера, включая stopPropagation () и preventDefault (), за исключением того, что события работают одинаково во всех браузерах.
blockquote>Event System
3 ответа
Предполагаю, вы имеете в виду, чтобы загрузить изображение в холст и не загружать изображение с холста.
Возможно, было бы неплохо прочитать все материалы холста, которые у них есть здесь 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]);
}
-
1красиво сделано. Я не знал о FileReader – Neil McGuigan 6 June 2012 в 01:58
-
2IE10 + с FileReader - caniuse.com/filereader - Но существует полиполк, очевидно, github.com/Jahdrien/FileReader – Cory Mawhorter 27 May 2013 в 06:56
-
3Как бы вы запускали код без кнопки? Что делает "e" см. в примере? – Waltari 7 March 2016 в 11:48
-
4@Waltari: переменная 'e' - это событие с файлом, использующее API FileReader, вы не сможете этого сделать, не используя File Input или dropzone, потому что вы не можете просто программно запускать файловую систему пользователя (как далеко как я знаю). – DerekR 30 March 2016 в 05:00
<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>
Проверить Демо
-
1Мне было любопытно, как насчет этого вопроса. Это строка: img.src = "images / vft.jpg". Вопрос заключается в том, как решить эту проблему динамически, основываясь на том, что пользователь загружает (любое имя файла!), Вы только ставите ее статически для этого файла. – HoldOffHunger 26 June 2018 в 16:36
Не нужно FileReader *, лучше использовать метод URL.createObjectURL , который создаст символическую ссылку непосредственно в файл на диске. Это приведет к меньшему использованию памяти и даст дополнительное преимущество для ожидания только одного асинхронного события (один из img.onload).
document.getElementById('inp').onchange = function(e) {
var img = new Image();
img.onload = draw;
img.onerror = failed;
img.src = URL.createObjectURL(this.files[0]);
};
function draw() {
var canvas = document.getElementById('canvas');
canvas.width = this.width;
canvas.height = this.height;
var ctx = canvas.getContext('2d');
ctx.drawImage(this, 0,0);
}
function failed() {
console.error("The provided file couldn't be loaded as an Image media");
}<input type="file" id="inp">
<canvas id="canvas"></canvas>* IIRC только несколько версий Chrome поддерживали FileReader, еще не поддерживая URL.createObejctURL, поэтому, если вы нацеливаете эти самые версии, вам может понадобиться FileReader ..
-
1– Abhinav Ravi 3 September 2018 в 04:45
-
2– Kaiido 3 September 2018 в 04:47
-
3– ewahner 18 October 2018 в 13:49