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

Question

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

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

如何管理upload/store外部图像？

Answer 1

您的问题实际上是关于如何让用户 select 图像并使其显示在浏览器的 img 元素中。加载 img 元素后，您可以使用它来绘制 Konva.Image 元素。

我改编了此 question 中的代码，它展示了如何将本地图像加载到 HTML img 元素中 - 然后修改它以将图像加载到 [= 上的 Konva 图像对象中27=].

我知道这是普通的 JS，但是你应该可以在 Internet 上找到加载本地图像的 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>

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

How to Upload and load image in Konvajs canvas?

vue.js

konvajs