Question

那里有Fabric.JS向导吗？

我完成了公平的研究，我似乎无法找到关于如何将图像添加到fabric.JS画布的大量解释。

用户之旅：

a）用户从输入文件类型按钮上传图像。 b）一旦他们从计算机中选择了一个图像，我就想把它放到用户画布中。

到目前为止，我已将图像存储到表达式中，这是我的代码：

    scope.setFile = function(element) {
        scope.currentFile = element.files[0];
        var reader = new FileReader();

        /**
         *
         */
        reader.onload = function(event) {
            // This stores the image to scope
            scope.imageSource = event.target.result;
            scope.$apply();

        };

        // when the file is read it triggers the onload event above.
        reader.readAsDataURL(element.files[0]);
    };

我的HTML / Angular：

            <label class="app-file-input button">
                <i class="icon-enter"></i>
                <input type="file"
                       id="trigger"
                       onchange="angular.element(this).scope().setFile(this)"
                       accept="image/*">
            </label>

如果您还没猜到我正在使用MEAN堆栈。猫鼬，快速，角度和节点。

范围imageSource是图像的存储位置。我read this SO

它讨论了使用我的结果将图像推送到Image对象，然后将其传递给fabric.Image对象。有没有人做过类似的事情，他们可以帮助我？

提前致谢

****更新**** Directive定义了canvas变量：

            var canvas = new fabric.Canvas(attrs.id, {
                isDrawingMode: true
            });

Answer 1

使用Fabric js从计算机上传图像。

＆＃13;

var canvas = new fabric.Canvas('canvas');
document.getElementById('file').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) {
      var oImg = img.set({left: 0, top: 0, angle: 00,width:100, height:100}).scale(0.9);
      canvas.add(oImg).renderAll();
      var a = canvas.setActiveObject(oImg);
      var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
    });
  };
  reader.readAsDataURL(file);
});

＆＃13;

canvas{
  border: 1px solid black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<input type="file" id="file"><br />
<canvas id="canvas" width="450" height="450"></canvas>

＆＃13;

Answer 2

完成dataURL后，您可以执行以下任一操作：

[ansview setCenterX:self.view.centerX];
[ansview setCenterY:self.view.centerY];

或者您将图像标记放在onload事件上：

@AfterMethod
public void tearDown(ITestResult result)
{
    if(result.getStatus()==ITestResult.FAILURE)
    {
    //hope u know how to create ExtenTest and ExtentReport instance 
    //logger is extent test instance
    logger.log(LogStatus.FAIL, "Title verification", image);


}

//report is ExtentReport instance
report.endTest(logger);
report.flush();

}

将图像从计算机上载到Fabric.JS Canvas

2 个答案: