从上传字段向 canvas 添加图像时，它被选中但隐藏在 canvas 后面

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 canvas 使用文件输入。

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"/>

从上传字段向 canvas 添加图像时，它被选中但隐藏在 canvas 后面

When adding image to canvas from an upload field it is selected but hidden behind the canvas

javascript

fabricjs