当将图像从上传字段添加到画布时，它被选中，但隐藏在画布后面

Question

函数中的input变量是图像发送和上传输入文件字段。

function readURLForSticker(input) {
TypeBelettering = "sticker";
if (input.files && input.files[0]) {

var imgs = new Image();
imgs.onload = function () {
originalImageHeightPX = this.height;
originalImageWidthPX = this.width;
imageHeightMM = originalImageHeightPX * 0.2645833333;
imageWidthMM = originalImageWidthPX * 0.2645833333;

};
imgs.onerror = function () {
alert("not a valid file: " + file.type);
};
urlLogo = _URL.createObjectURL(input.files[0]);  
imgs.src = urlLogo;
reader = new FileReader();
reader.onload = function (e) {
imgs.src = e.target.result;

stickerImage = new fabric.Image(imgs);
canvas.add(stickerImage);
canvas.centerObject(stickerImage);
canvas.setActiveObject(stickerImage);
canvas.renderAll();
}
reader.readAsDataURL(input.files[0]);
imageUploaded = true;
}

}

这是输入发送的内容

$("#upload-picture").change(function() {
readURLForSticker(this);

});

当你稍微拖动一点图像时，它会起作用，但对于假人来说，它是无用的。

Answer 1

您提供的代码似乎不完整，因此与其尝试用它创建一个工作示例，不如演示如何使用文件输入将图像添加到Fabric.js画布中。

var canvas = new fabric.Canvas('canvas');
document.getElementById("uploader").onchange = function(e) {
var reader = new FileReader();
reader.onload = function(e) {
var image = new Image();
image.src = e.target.result;
image.onload = function() {
var img = new fabric.Image(image);
img.set({
left: 100,
top: 100
});
img.scaleToWidth(200);
canvas.add(img).setActiveObject(img).renderAll();
}
}
reader.readAsDataURL(e.target.files[0]);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
<canvas id="canvas" width="400" height="300" style="border:1px solid black"></canvas>
<input id="uploader" type="file"/>