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

Posted 2023-02-22

【中文标题】如何在 Konvajs 画布中上传和加载图像？

【英文标题】：How to Upload and load image in Konvajs canvas?

【发布时间】：2020-02-10 23:58:11

【问题描述】：

我使用 konva js 插件来表示画布。我已经浏览了文档，但无法获得使用 konvajs 上传图片的任何帮助。

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

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

【问题讨论】：

查看下面的修改答案。

您好 - 如果我的答案是正确的，请您点击勾号将其标记为正确答案。标记正确或最​​有帮助的答案有助于其他人判断其相关性并将积分奖励给回答者。谢谢。

【参考方案1】：

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

我改编了来自 question 的代码，它显示了如何将本地图像加载到 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>