javascript - 如何使用 Fabric.js 将本地磁盘中的多个图像添加到 Canvas ？

Question

我正在使用 Fabric.js 在 HTML5 canvas 中创建图像拼贴应用程序。我希望用户可以将文件拖放到“文件拖放区域”，并且他还可以从本地磁盘“选择文件”。请帮助我实现这一点。

我正在使用此代码添加多个图像。现在，我想将本地磁盘中的图像添加到 Canvas 上。

//Image 1
 fabric.Image.fromURL('/3.jpg', function (img) {
        var oImg = img.set({ left: 300, top: 300, angle: -15 }).scale(0.9);
        canvas.add(oImg).renderAll();
        canvas.setActiveObject(oImg);

    });

 //Image 2
 fabric.Image.fromURL('/bokeh.jpg', function (img) {
        var oImg = img.set({ left: 300, top: 300, angle: -15 }).scale(0.9);
        canvas.add(oImg).renderAll();
        canvas.setActiveObject(oImg);
    });

Answer 1

嘿，我有拖放和选择文件的解决方案，但不是在一个答案中，实际上我有两种不同的单独解决方案 拖放: http://jsfiddle.net/rodrigopandini/gj7HT/

选择文件:

<input type="file" id="imgLoader">

    <canvas id="c" width="300" height="300"></canvas>
<script src="https://raw.github.com/kangax/fabric.js/master/dist/all.js"> </script>
<script type="text/javascript>
canvas = new fabric.Canvas('c');

document.getElementById('imgLoader').onchange = function handleImage(e) {
    var reader = new FileReader();
    reader.onload = function (event) { console.log('fdsf');
        var imgObj = new Image();
        imgObj.src = event.target.result;
        imgObj.onload = function () {
            // start fabricJS stuff

            var image = new fabric.Image(imgObj);
            image.set({
                left: 250,
                top: 250,
                angle: 20,
                padding: 10,
                cornersize: 10
            });
            //image.scale(getRandomNum(0.1, 0.25)).setCoords();
            canvas.add(image);

            // end fabricJS stuff
        }

    }
    reader.readAsDataURL(e.target.files[0]);
}
</script>

您可以在一个脚本中尝试这些代码。