Как добавить в слой загружаемое изображение - PullRequest
Новая
       8

Как добавить в слой загружаемое изображение

0 голосов
/ 04 ноября 2018

Я хотел бы знать, как добавить в image.src изображение для загрузки. Я знаю, что с convas я делаю image.src = event.target.result но это не работает.

ц 

 onFileSelected(event){
    var layer = new Konva.Layer();
    var stage: Konva.Stage;  
    var box: Konva.Rect;

    var image = new Image();
    image.onload = function()
    {    
      var img = new Konva.Image({ image: image });
      stage = new Konva.Stage({
        container: 'container',
        width: image.width,
        height: image.height
      });
      layer.add(img);
      stage.add(layer); 
    }
    image.src = '' /* Image to put event.target.result */;
  }

HTML 

<input type="file" (change)="onFileSelected($event)" accept="image/*"> <br><br>

<div id="container" style="border: 2px solid red;"></div>

1 Ответ

0 голосов
/ 05 ноября 2018

Ваш пример кода выглядит в основном функциональным. Откройте инструменты разработчика вашего браузера (F12) и посмотрите, нет ли здесь сообщений или ошибок. Я подозреваю, что возникли проблемы с другими источниками. Для поиска решений воспользуйтесь поиском в SO или Google.

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

$('#daFile').on('change', function(e){
    var layer = new Konva.Layer();
    var stage = new Konva.Stage({container: 'container'})
    
    var image = new Image();
    
    var path = $(this).val(); // jquery way of retreiving new path
    
    image.onload = function()
    {    
      var img = new Konva.Image({ image: image });
      stage.size({width: image.width, height: image.height});
      layer.add(img);
      stage.add(layer); 
      stage.draw();
    }
    image.src = path;
  })
  
  setTimeout( function(){$('#daFile')
    .val('https://i.stack.imgur.com/kSo4z.jpg')
    .trigger('change');
    }, 500);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/konvajs/konva/1.6.5/konva.min.js"></script>
<div>
Select a file 
<select id='daFile'>
<option value='https://i.stack.imgur.com/Awa0C.png'>Nosey dog</option>
<option value='https://i.stack.imgur.com/kSo4z.jpg'>Snow dog</option>
</select>
</div>  
<div id='container' style="display: inline-block; width: 300px, height: 200px; background-color: silver; overflow: hidden; position: relative;"></div>
<div id='img'></div>
...