如何在图层中添加上传图片

Question

我想知道如何在 image.src 中添加上传图片。我知道 convas 我做 image.src = event.target.result 但它不起作用。

ts

 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>

Answer 1

您的示例代码看起来基本上可以正常工作。打开浏览器开发工具 (F12)，看看这里是否有任何消息或错误。我怀疑跨域问题 - 搜索 SO 或 Google 以获取跨域解决方案。

我不能给你一个可用的 angular 例子，甚至不能给你一个使用文件 select 的普通 JS 例子，因为我的 Chrome 浏览器坚持我不能加载本地文件到这个网站。不管怎样，下面的代码片段使用 select 框的更改事件的方式与您对文件 select 的方式相同。它基于您的代码的意图。

$('#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>

如何在图层中添加上传图片

How to add in layer a upload image

konvajs

angular7