在畫布 FabricJS 中上傳背景圖像

Question

如何使用輸入類型文件從本地上傳 FabricJS Canvas 中的背景圖像。

我有圖像代碼，我可以將此代碼也用於背景圖像：

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

Answer 1

是的，你可以，但加載圖像后，你必須從 url 加載它，然后放置為背景

 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); });