Heim > Artikel > Web-Frontend > Wie erstelle ich mit FabricJS eine Instanz von Fabric.Image aus einer URL-Zeichenfolge?
Wie erstelle ich mit FabricJS eine Instanz von Fabric.Image aus einer URL-Zeichenfolge?
- PHPznach vorne
- 2023-08-24 14:09:111798Durchsuche
In diesem Tutorial lernen wir, wie man anfängt URL-String mit FabricJS. Wir können ein Bildobjekt erstellen, indem wir eine Instanz erstellen Stoff.Bild. Da es eines der Grundelemente von FabricJS ist, können wir es auch problemlos Passen Sie es an, indem Sie Eigenschaften wie Winkel, Deckkraft und mehr anwenden. um zu erschaffen Um eine Fabric.Image-Instanz aus einer URL-Zeichenfolge zu erstellen, verwenden wir die Methode fromURL.
Grammatik
fromURL(url: String, callback: function, imgOptions: Object)
Parameter
url – Dieser Parameter akzeptiert eine Zeichenfolge, die die URL darstellt, von der aus das Bild erstellt wurde.
Rückruf (optional) – Dieser Parameter ist eine Funktion , die unmittelbar nach der Erstellung des Bildes aufgerufen wird. Für diese Funktion wird das neu erstellte Bild als erster Parameter übergeben. Der zweite Parameter ist ein boolescher Wert, der angibt, ob ein Fehler aufgetreten ist. Dieser Parameter ist optional.
imgOptions (optional) – Dieser Parameter ist ein optionales Objekt, das unserem Bild zusätzliche Anpassungen ermöglicht. Verwenden Sie diesen Parameter, um den Ursprung, die Strichstärke und viele andere mit dem Bildobjekt verknüpfte Eigenschaften zu ändern.
Verwenden Sie nicht die fromURLMethode
Beispiel
Sehen wir uns ein Codebeispiel an, um zu sehen, wie ein Bildobjekt angezeigt wird, wenn die Methode fromURL verwendet wird Nicht verwendet. In diesem Fall müssen wir lediglich eine Instanz von fabric.Image erstellen und hinzufügen zu unserer Leinwand.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Without using the fromURL method</h2>
<p>You can see that the image object has been added to the canvas</p>
<canvas id="canvas"></canvas>
<img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating the image element
var imageElement = document.getElementById("img1");
// Initiate an Image object
var image = new fabric.Image(imageElement, {
top: 50,
left: 110,
});
// Add it to the canvas
canvas.add(image);
</script>
</body>
</html>
Verwenden Sie die fromURL-Methode
Beispiel
In diesem Beispiel haben wir die Methode fromURL verwendet, um zu zeigen, dass wir erstellen können Auch wenn wir kein Bildelement haben, ist es ein Bildobjekt. In diesem Fall brauchen wir nur Erfordert die URL des Bildes und übergibt die erstellte Rückruffunktion fabric.Image-Objekt als ersten Parameter und fügen Sie es dann der Leinwand hinzu.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Using the fromURL method</h2>
<p>
You can see that the image object can be created from the image URL itself
</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Calling fabric.Image.fromURL and passing the url of our desired image
fabric.Image.fromURL(
"https://www.tutorialspoint.com/images/logo.png",
function(Img) {
canvas.add(Img);
}
);
</script>
</body>
</html>
Fazit
In diesem Tutorial zeigen wir anhand von zwei Beispielen, wie man erstellt Rufen Sie mit FabricJS ein Fabric.Image aus einer URL-Zeichenfolge ab.
Das obige ist der detaillierte Inhalt vonWie erstelle ich mit FabricJS eine Instanz von Fabric.Image aus einer URL-Zeichenfolge?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!