Как загрузить и загрузить изображение на холсте Konvajs? - PullRequest
Новая
       45

Как загрузить и загрузить изображение на холсте Konvajs?

1 голос
/ 14 октября 2019

Я использовал плагин konva js для представления холста. Я просмотрел документ, но не могу получить какую-либо помощь при загрузке изображения с помощью konvajs.

Это так, что мне нужно сделать пользовательский код? Поддерживает ли konva js загрузку изображений из папки и сохранение элементов canvas?

Как осуществляется управление загрузкой / сохранением внешнего изображения?

1 Ответ

1 голос
/ 14 октября 2019

Ваш вопрос действительно о том, как позволить пользователю выбрать изображение и отобразить его в элементе img в браузере. После загрузки элемента img вы можете использовать его для рисования в элементе Konva.Image.

Я адаптировал код из этого вопроса , который показывает, как загрузить локальное изображение в HTMLЭлемент img - затем изменил его, чтобы загрузить изображение в объект изображения Konva на холсте.

Я понимаю, что это простой JS, но вы должны быть в состоянии найти Vue примеры загрузки локального изображения в Интернете -просто используйте событие onload для обработки шагов Konvajs. 

// Create the stage and a layer to draw on.
var stage = new Konva.Stage({
  container: 'canvas-container',
  width: 650,
  height: 300
});

var layer = new Konva.Layer();
stage.add(layer);
stage.draw();

// listen for the file input change event and load the image.
$("#file_input").change(function(e){

    var URL = window.webkitURL || window.URL;
    var url = URL.createObjectURL(e.target.files[0]);
    var img = new Image();
    img.src = url;


    img.onload = function() {

      var img_width = img.width;
      var img_height = img.height;

      // calculate dimensions to get max 300px
      var max = 300;
      var ratio = (img_width > img_height ? (img_width / max) : (img_height / max))

      // now load the Konva image
      var theImg = new Konva.Image({
        image: img,
        x: 50,
        y: 30,
        width: img_width/ratio,
        height: img_height/ratio,
        draggable: true,
        rotation: 20
      });

      layer.add(theImg);
      layer.draw();
    }


});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script        src="https://cdnjs.cloudflare.com/ajax/libs/konva/3.2.5/konva.min.js"></script>
<div>Render a local image without upload</div>
<div>
  <input type="file" id="file_input">
</div>
<div id="canvas-container" style='display: inline-block; border: 1px solid #ccc;  background-color: #ccc; overflow: auto;'></div>
...