如何在 Konvajs 画布中上传和加载图像？

Question

我已经使用 konva js 插件进行画布表示。我已经阅读了文档，但无法获得使用 konvajs 上传图像的任何帮助。

是不是我需要做自定义代码？konva js 是否支持从文件夹上传图片并保存到画布元素？

如何管理上传/存储外部图像？

Answer 1

您的问题实际上是关于如何让用户选择图像并将其显示在浏览器的 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>