Canvas と gif.js を使用して独自のデジタル雨アバターを作成する

この記事では、canvas+gif.js を使用して独自のデジタル雨アバターを作成するためのサンプル コードを主に紹介します。詳細なコードはここにまとめられています。必要な友人が参考になれば幸いです。 。

使用手順

1. 好きなアバターをアップロードすると、最終的には正方形になります

2. 文字の色が奇妙すぎるかどうかを確認して、文字の色を変更できます

3. 問題がなければ、右クリックして

gif.js

として保存します。今日の主役は gif.js です。Gif.js は、ブラウザ上で GIF をアニメーション化するためのライブラリです。私が思う落とし穴を紹介します。デジタル雨の描き方に関しては庭に関連記事があるので盲目ではないです。

gif.js は、キャンバス アニメーションに基づいて gif を簡単に取得できます:

//代码来自官网

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();//开始启动

全体的に、このライブラリの API は非常にシンプルでフレンドリーです。以前jsGifを見たときは混乱しましたが、後からこんな良いものを発見しました。 gif 画像の生成は、特に画像が大きい場合に CPU を大量に使用する操作であるため、このライブラリを使用すると Webworker でのレンダリングが可能になります。ただし、ドキュメントにはまだ注意すべき点がいくつかあります (実際に落とし穴を踏んでしまいました):

1.git.addFrame はフレームを追加するためのもので、動く GIF を生成するには、ループが必要です:

。

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

2. 以下に示すように、ワーカーで画像をレンダリングできるように、コンストラクター GIF のオプションのうち、workerScript オプションが必要です。急いで試してみてください。

関連する推奨事項:

WeChat アプレットでアバターをアップロードする方法

Laravel を使用して Gravatar アバター アドレスを生成するエレガントな方法

CSS3 を使用してアバターの回転効果の例の共有を実現します

以上がCanvas と gif.js を使用して独自のデジタル雨アバターを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。