ホームページ > 記事 > ウェブフロントエンド > フロントエンドメソッドを使用して画像をキャラクターペイントに変換する
フロントエンドメソッドを使用して画像をキャラクターペイントに変換する
- php中世界最好的语言オリジナル
- 2018-05-24 16:05:123225ブラウズ
今回はフロントエンドメソッドを使って写真をキャラクター絵に変換する際の注意点をご紹介します。
プロジェクトの説明
サーバーに依存しない純粋なフロントエンドプロジェクト
jpg、png、gifの3つの形式の画像をサポート
canvasを使用して解析、スケーリング、生成を実現単一フレーム画像の場合は、gif.js を使用します 単一フレーム画像を GIF 画像に結合します
同じ比率に拡大縮小できます
テキストと背景色をカスタマイズできます
変換に使用される文字をカスタマイズできます
-
一部メソッド実装の参考 ソースコードにソースを記載
プロジェクトでは技術スタックを使用
webpack
React
-
gif.js (gif画像の生成に使用)
プロジェクトの構造
├─ src │ ├─ component 组件文件 │ ├─ style 样式文件 │ ├─ tools 图片解析、转化工具文件 │ ├─ App.jsx │ ├─ index.js │ └─ index.html ├─ static │ └─ js │ └─ gif.worker.js gif.js生成图片依赖文件 ├─ webpack │ └─ webpack 配置文件 └ 其他文件
効果のデモンストレーション
基本機能
画像サイズのスケーリング
色（テキストと背景）を設定
カスタマイズされた変換文字
ローカルランニング
開発モード
npm i npm run dev
プロジェクトのパッケージ化
npm run build
githubページに公開
npm run deploy
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。 ！
推奨読書:
vue命令を使用してローリングロードモニタリングを実装する手順の詳細な説明
以上がフロントエンドメソッドを使用して画像をキャラクターペイントに変換するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。