简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

フロントエンドメソッドを使用して画像をキャラクターペイントに変換する

php中世界最好的语言
リリース： 2018-05-24 16:05:12
オリジナル
3169 人が閲覧しました

今回はフロントエンドメソッドを使って写真をキャラクター絵に変換する際の注意点をご紹介します。

プロジェクトの説明

  • サーバーに依存しない純粋なフロントエンドプロジェクト

  • 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 サイトの他の関連記事を参照してください。

関連ラベル：
写真 成し遂げる 方法
ソース：php.cn
前の記事：jQuery は Ajax 経由で PHP サーバーにリクエストを送信し、JSON データを返します。 次の記事：jQuery post を使用して特殊文字を含むデータを渡す方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1335
単語と一致する正規表現 新しいジョブ名をデータベース内の既存のジョブ名と照合しようとするスクリプトがあります。 SELECTa.titleASJobTitle,j.DescriptionASMatched...
から 2024-04-06 21:24:04
0
1
606
Javafx でインライン CSS スタイルを動的に変更する アプリケーションが最大化されているときにペインの背景画像を変更しようとしています。私の背景はインライン CSS を使用して設定されています。スタイル用に 2 つの異なる変数と if...
から 2024-04-06 20:57:16
0
1
487
グリッドを使用してこの特定のデザインを作成する: ステップバイステップ ガイド この画像に似たレイアウトを作成しようとしています。このグリッドを使用してみましたが、実現できません。 <ulclass="container">&l...
から 2024-04-06 20:29:08
0
2
492
モバイル ビューで、ユーザーがリンクをクリックしたときにこのナビゲーション バーを閉じるにはどうすればよいですか? ユーザーがリンクをクリックして Web サイトを閲覧すると、ナビゲーション バーが閉じませんか?ナビゲーション バーを閉じるために、クリック イベント リスナーを各リンクに追加しよ...
から 2024-04-06 19:23:03
0
1
411
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！