使用 Fabric.js 添加图像答案

【问题标题】：Adding images with Fabric.js使用 Fabric.js 添加图像
【发布时间】：2015-10-16 03:16:07
【问题描述】：

我是 JavaScript 新手，我正在使用 Fabric.js 使用此代码，只需单击一个按钮即可创建多个图像。我从另一篇允许形状的帖子中找到了以下代码，但我似乎无法弄清楚如何成功制作这些图像。

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="fabric.min.js"></script>
<script type="text/javascript">
jQuery(function($){
var canvas = new fabric.Canvas('c');

$("#addCircle").click(function(){
       canvas.add(new fabric.Circle({
    radius: 20, fill: 'green', left: 100, top: 100
 }));
  });

});

</script>
</head>
<body>
<div id="wrapper">
<div id="editor">
<input type="button" id="addCircle" value="Add Circle"></div>
<canvas id="c" width="300" height="300"></canvas>
</div>

</body>
</html>

【问题讨论】：

在他们的网站上有一个处理图像的教程：fabricjs.com/fabric-intro-part-1/#images

标签： javascript image fabricjs

【解决方案1】：

您可以轻松地将已上传的任何图片添加到这样的 url：

这是 js sn-p:

var canvas = new fabric.Canvas('c');

canvas.backgroundColor = 'yellow';
canvas.renderAll();
var myImg = 'http://www.logowik.com/uploads/images/511_android.jpg';


$('#addImage').on('click',addImg);

function addImg(){
    fabric.Image.fromURL(myImg, function(oImg) {
        var l = Math.random() * (500 - 0) + 0;
        var t = Math.random() * (500 - 0) + 0;                
            oImg.scale(0.2);
        oImg.set({'left':l});
                  oImg.set({'top':t});
            canvas.add(oImg);
        });
}

在这里你可以找到一个关于 jsfiddle 的活生生的例子：http://jsfiddle.net/tornado1979/1awwv3eh/1/ 按下按钮并在随机位置导入图像。

希望有帮助，祝你好运。

【讨论】：

【解决方案2】：

这是您可以使用 HTML5 文件 API 从本地计算机读取图像并在 fabric.js 画布中呈现的方式：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-2.1.4.js"></script>
<script src="Scripts/fabric.min.js"></script>
<script type="text/javascript"> 

    var myAppModule = (function () {
        var outObj = {};

        var file, fileReader, img;
        var cCanvas, cImg;

        var init = function (newFile, newFileReader) {
            file = newFile;
            fileReader = newFileReader;
        };

        var onloadImage = function () {
            cCanvas = new fabric.Canvas('myCanvas');
            cCanvas.setWidth(img.width);
            cCanvas.setHeight(img.height);

            cImg = new fabric.Image(img, {
                left: 0,
                top: 0,
                angle: 0
            });

            cCanvas.add(cImg);
        };

        var onloadFile = function (e) {
            img = new Image();
            img.onload = onloadImage;
            img.src = fileReader.result;
        };

        outObj.init = init;
        outObj.OnloadFile = onloadFile;

        return outObj;
    })();

    function handleFileSelect(evt) {
        var files = evt.target.files;
        var output = [];
        for (var i = 0, f; f = files[i]; i++) {

            if (!f.type.match('image.*')) {
                continue;
            }

            var reader = new FileReader();

            myAppModule.init(f, reader);

            reader.onload = myAppModule.OnloadFile;

            reader.readAsDataURL(f);

        }
    }

    $(document).ready(function () {
        document.getElementById('selectFile').addEventListener('change', handleFileSelect, false);

    });
</script>
</head>
<body>
<canvas id="myCanvas">

</canvas>

<form id="form1">

    <input type="file" id="selectFile" name="selectFile"/>

</form>
</body>
</html>

【讨论】：