作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我已经使用 konva js 插件进行 Canvas 表示。我已经阅读了文档,但无法获得使用 konvajs 上传图像的任何帮助。
是不是我需要做自定义代码? konva js 是否支持从文件夹上传图片并保存到 Canvas 元素?
如何管理上传/存储外部图像?
最佳答案
您的问题实际上是关于如何让用户选择图像并将其显示在浏览器的 img 元素中。加载 img 元素后,您可以使用它来绘制 Konva.Image 元素。
我改编了来自这个 question 的代码它显示了如何将本地镜像加载到 HTML img 元素中 - 然后对其进行修改以将图像加载到 Canvas 上的 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>
关于vue.js - 如何在 Konvajs Canvas 中上传和加载图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58375428/
我是一名优秀的程序员,十分优秀!