如何在将图像上传到 canvas 之前初始化图像？

Question

我正在使用 fabricjs，我想在将图像上传到 canvas 之前初始化图像，以便从函数外部对其进行操作。我做了一个 fiddle: http://jsfiddle.net/o81974e8/

这是我的脚本：

var $imageLoader = $("#file-upload-button-background");
var canvas = new fabric.Canvas("canvas");
$imageLoader.on("change", function () {
    readURL(this);
});

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            var imgObj = new Image();
            imgObj.src = e.target.result;
            imgObj.onload = function () {
                image = new fabric.Image(imgObj);
                image.set({
                    angle: 0,
                    padding: 0,
                    height: image.height,
                    width: image.width,
                });
                canvas.add(image);
                if (input.className === "file-upload-button")
                    canvas.sendToBack(image);
                canvas.renderAll();
            }
        }
        reader.readAsDataURL(input.files[0]);
    }
}

我想将图像变量设置为全局变量，然后在函数内部更改它。像这样：

var text = new fabric.Text('Sample', {
    left: 60,
    top: 200,
    fill: $colorpickerVal,
    fontFamily: "Montserrat",
    fontSize: $fontSize.val()
});
$textForm.on("click", function () {
    canvas.add(text);
    text.hasControls = false;
    canvas.setActiveObject(text);
    canvas.renderAll();
});
$textLoader.on("input", applyText);
$textLoader.on("input", function () {
    var obj = canvas.getActiveObject();
    if (!obj) return;
    obj.setText($(this).val());
    canvas.renderAll();
})

function applyText() {
    canvas.getActiveObject().set({
      fill: $colorpickerVal,
      fontSize: $fontSize.val(),
      fontFamily: fontFamilySelect,
    });
    canvas.renderAll();
}

Answer 1

我自己找到了解决方案。您只需要定义一个数组，然后将对象推送到该数组。然后你可以用它做任何事情。像这样：

var array = [];
function readURL(...) {
  //...
  array.push(image);
  //...
};
canvas.setActiveObject(array[0]);

如何在将图像上传到 canvas 之前初始化图像？

How to initialize image before uploading it to canvas?

javascript

jquery

canvas

fabricjs