Wie zum hochladen von einem Bild auf eine Leinwand, mit Fabric.js?

Ich will, dass, um einen Prozess zu erstellen, wo der Benutzer kann seine Bilder hochladen und dann Bearbeiten Sie diese in den browser ein Canvas mit Fabric.js mit einigen Tasten, welche verwendet Fabric.js fügen Sie einige Effekte.

Kann ich nicht machen, es funktioniert. Mein HTML ist:

<form id="uploadImg" runat="server">
  <input type="file" id="uploadedImg"/>
</form>
<canvas id="canvas"></canvas>

Javascript ist folgende:

var canvas = new fabric.Canvas('canvas');
canvas.setHeight(480);
canvas.setWidth(640);

$('#uploadedImg').change(function () {
    var imgData = $(this).files[0];
    fabric.util.loadImage(imgData, function(img) {
        var oImg = new fabric.Image(img);
        oImg.scale(0.2).set({
            left: 100,
            top: 100,
        });
    canvas.add(oImg);
    });
});
  • Fand gerade die Antwort mit einem Beispiel arbeiten hier
InformationsquelleAutor Erzei | 2014-02-11
  1. 21
    document.getElementById('imgLoader').onchange = function handleImage(e) {
var reader = new FileReader();
  reader.onload = function (event){
    var imgObj = new Image();
    imgObj.src = event.target.result;
    imgObj.onload = function () {
      var image = new fabric.Image(imgObj);
      image.set({
            angle: 0,
            padding: 10,
            cornersize:10,
            height:110,
            width:110,
      });
      canvas.centerObject(image);
      canvas.add(image);
      canvas.renderAll();
    }
  }
  reader.readAsDataURL(e.target.files[0]);
}
    • Dank diesem code funktioniert Prima. aber wenn ich versuche das gleiche Bild hochladen, fortlaufend dann den zweiten mal nicht hochladen
    • Zum hochladen des gleichen Bildes, das Sie löschen müssen Sie die input[type="file"] Elemente Wert. So etwas wie e.target.value = null;
    InformationsquelleAutor samad
  2. 12

    Können Sie mehrere Bild-upload von Gewebe js und auch ziehbar einem Ort zu einem anderen Ort in Leinwand.

    JS:

    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: 0,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);
});

    CSS:

    canvas{
  border: 1px solid black;
}


Include it like this:

    HTML:

    <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>

    • Hey danke für das Beispiel, sehr cool.
    • Viel Glück..
    InformationsquelleAutor V SH
  3. 0
     var canvas = new fabric.Canvas('main-canvas');
        canvas.selection = false;
        var imgElement = document.getElementById("img11");

        var imgInstance = new fabric.Image(imgElement, {
            angle: 0,
            position: 'absolute',
            opacity: 1,
            originX: 'left',
            originY:'top',
            meetOrSlice:'slice',

        });
        imgInstance.selectable = false;
        canvas.add(imgInstance);
        canvas.renderAll();
    InformationsquelleAutor Rajat Jain
Schreibe einen Kommentar