我想知道如何在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>
答案 0 :(得分: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>