Erstellen Sie Ihren eigenen digitalen Regen-Avatar mit Canvas und gif.js

In diesem Artikel wird hauptsächlich der Beispielcode zum Erstellen Ihres eigenen digitalen Regen-Avatars mit canvas+gif.js vorgestellt, der für Freunde in Not von großem praktischem Wert ist allen helfen.

Gebrauchsanweisung

1. Laden Sie einen Avatar hoch, der Ihnen gefällt, der letzte ist quadratisch

2 . Überprüfen Sie nach der Generierung, ob die Zeichenfarbe zu seltsam ist.

3. Wenn Sie zufrieden sind, klicken Sie mit der rechten Maustaste und speichern Sie sie als

gif.js

Der heutige Protagonist ist gif.js. Gif.js ist eine Bibliothek, die auf H5api basiert, um GIFs im Browser zu animieren. Zum Zeichnen von digitalem Regen gibt es verwandte Artikel im Garten, ich werde also nicht blind sein.

gif.js kann ganz einfach GIFs basierend auf Leinwandanimationen abrufen:

//代码来自官网

var gif = new GIF({
 workers: 2,//启用两个worker。
 quality: 10//图像质量
});//创建一个GIF实例

// 核心方法，向gif中加一帧图像，参数可以是img/canvas元素，还可以从ctx中复制一帧
gif.addFrame(imageElement);

// or a canvas element
gif.addFrame(canvasElement, {delay: 200});//一帧时长是200

// or copy the pixels from a canvas context
gif.addFrame(ctx, {copy: true});

gif.on('finished', function(blob) {//最后生成一个blob对象
 window.open(URL.createObjectURL(blob));
});

gif.render();//开始启动

Insgesamt ist die API dieser Bibliothek sehr einfach und benutzerfreundlich. Ich habe schon einmal ein jsGif gesehen und es war verwirrend, aber später habe ich so etwas Gutes entdeckt. Da das Generieren von GIF-Bildern ein CPU-intensiver Vorgang ist, insbesondere wenn die Bilder groß sind, ermöglicht die Bibliothek das Rendern in einem Webworker. Es gibt jedoch noch ein paar Punkte, die im Dokument beachtet werden müssen (eigentlich bin ich auf die Fallstricke gestoßen):

1.git.addFrame dient zum Hinzufügen eines Frames, einer Schleife ist erforderlich:

for(...){
gif.render(...)
}

2. Unter den Optionen des Konstruktor-GIF ist die Option workerScript erforderlich, damit das Bild im Worker gerendert werden kann, wie unten gezeigt :

var gif = new GIF({
workers: 2,
quality: 10,
  workerScript:'./gif.worker.js'
});

Hast du es gelernt? Beeilen Sie sich und probieren Sie es aus.

Verwandte Empfehlungen:

So laden Sie einen Avatar im WeChat-Applet hoch

Eine elegante Möglichkeit, mit Laravel eine Gravatar-Avatar-Adresse zu generieren

Teilen von Beispielen für Avatar-Rotationseffekte mit CSS3

Das obige ist der detaillierte Inhalt vonErstellen Sie Ihren eigenen digitalen Regen-Avatar mit Canvas und gif.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!