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上搜索跨域决议。

我无法给您一个有用的角度示例，甚至无法给您一个使用文件选择的普通JS示例，因为我的Chrome浏览器坚持认为我无法将本地文件加载到此网站。无论如何，下面的代码段以与选择文件相同的方式使用选择框的change事件。它基于您代码的意图。

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

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

1 个答案: