在画布 FabricJS 中上传背景图像

Upload backgorund image in canvas FabricJS

本文关键字：背景 图像 FabricJS      更新时间：2023-09-26

如何使用输入类型文件从本地上传 FabricJS 画布中的背景图像。

我有图像代码，我可以将此代码也用于背景图像：

var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
    function handleImage(e) {
        var reader = new FileReader();
        reader.onload = function (event) {
            var img = new Image();
            img.onload = function () {
                var imgInstance = new fabric.Image(img, {
                    scaleX: 0.5,
                    scaleY: 0.5
                })
                canvas.add(imgInstance);
            }
            img.src = event.target.result;
        }
        reader.readAsDataURL(e.target.files[0]);
    }

参见： JSFIDDLE

是的，你可以，但只有在加载图像之后。您必须fromURL加载它，然后将其作为背景：

document.getElementById(id).addEventListener("change", function(e) {
   var file = e.target.files[0];
   var reader = new FileReader();
   reader.onload = function(f) {
      var data = f.target.result;
      fabric.Image.fromURL(data, function(img) {
         // add background image
         canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
            scaleX: canvas.width / img.width,
            scaleY: canvas.height / img.height
         });
      });
   };
   reader.readAsDataURL(file);
});

相关文章：