html5 - BinaryDevelop

textareaで改行や空白を処理する

textareaを使ってフォアグラウンドでテキストを編集し、jsでバックエンドに送信する場合、スペースと改行が最も考慮しなければならない問題です。textareaでは、スペースと改行は次のように保存されます。 /s と /n 私たちが入力して前面に表示するテキストがテキストエリアであれば、何もしなくても、テキストエリアに書いたスタイルが、前に編集したスタイルに従って、正しく表示されるのです。

2022-01-14 03:44:39
アップロード用画像の圧縮にcanvasを使用した例

プラグインのuiとプロトタイプが異なるので、自分でメソッドを書きました。まず、アップロードボタンが必要です。 <input type="file" id="fileys" class="fileys" @change="uploadFile($event)" accept=" image/*"/> <! --uploadFile uses change becau

2022-01-14 02:46:11
HTMLのテキスト属性とカラーコントロール属性の実装

I. 文字装飾のための属性 1. 書式：text-decoration:underline; 2. 価値観です。 (1) アンダーラインは下線を意味する (2) line-through は strikethrough の略です。 (3) overline は、オーバーラインの略です。 (4) none は何も書式設定しない（デフォルトはこのプ

2022-01-14 02:45:28
Html5ページオープンアプリに関するいくつかの考察

1.要件少し前のことですが、あるプロジェクトを開発していたところ、ある要件に出くわしました。簡単に言うと、私たちのH5ページには「アプリで開く」ボタンがあり、ユーザーがそれをクリックすると、ユーザーがアプリをインストールしている場合は直接アプリが開かれ、ユーザーがアプリをインストールしていない場合は、アプリのダウンロードページにジャンプするのですまず、私の知識では、H5はアプリがインストー

2022-01-14 02:43:25
html5 モバイルアダプティブレイアウトの実装

シナリオ様々な画面サイズに対応するため私が知っているアダプティブレイアウトの2つの方法 1. メディアクエリを使用して、いくつかの適応方法を以下に展開します。例えば、最初のものは、画面幅が320px-360pxの間であることを示し、htmlフォントサイズを13.65pxに適応させます。 <style> @media only screen and (max

2022-01-14 02:23:19
花火用キャンバスサンプルコード

前置き：もうすぐ大晦日、旧正月の祝福＋花火の卵をこっそり背景の中に埋める予定です。プロジェクトはreact+typescriptに基づいているので、最終的にコンポーネントにカプセル化され、オープニングの時間を表示することができます設定します。ディレクトリ構成ディレクトリ構成はおおよそ以下の通りです。花火が爆発するまでの連続上昇期と、爆発した後の分散期に分けて考

2022-01-14 02:18:49
html+js マークダウンエディタ効果

マークダウン用プラグインEditor.mdのオフィシャルサイトです。 https://pandao.github.io/editor.md/ I: Editor.mdをダウンロードする 1: 公式サイトにアクセスして直接ダウンロードする githubのダウンロードアドレスです。 https://github.com/pandao/editor.md 2

2022-01-14 02:15:50
HTML5 Blobによるファイルダウンロード機能のサンプルコード

原理は、実際には非常に簡単ですが、バイナリにBlobの助けを借りて、テキストまたはJS文字列情報（つまり、背景には、サーバー上の特定のパスなしで動的ファイルに、エクスポートデータ機能などを返します）、次に、ダウンロード属性とタグのhref属性として、ダウンロード機能を実現するには、欠点は、ファイルが大きすぎると、失敗をダウンロードしている場合です。データのエクスポートの例です。 $

2022-01-14 01:44:41
顔決済機能の実装をベースにしたHTML5+tracking.js

最近、顔決済が非常にホットなので、もちろん上司もその流れに乗りたいので、顔決済のプロジェクトがあります。この記事では、HTML5環境に顔認証を実装する方法と、その開発過程で発生した問題点について解説しています。 1.カメラ1.1カメラを取得するために入力します。 html5でユーザーカメラを取得するには、inputを使用して、以下の2つの方法があります。 <input t

2022-01-14 01:42:16
画像処理におけるキャンバスの活用

先日、前任者が面白いプロジェクトを薦めてくれました。TensorFlow.jsとcanvasの画像処理を使って、動画中の人の消失を実現する「Real-Time-Person-Removal」です。この機会に、canvasでの画像処理の基本をおさらいしておこうと思います。基本API canvasの画像処理機能は、ImageDataオブジェクトを通してピクセルデータを扱います。主なAP

2022-01-14 01:29:30
携帯電話のHtml5を達成するためにカメラのメソッドを呼び出すには

入力呼び出しデバイスのビデオ、カメラなど... /{br HTML5の公式ドキュメントに説明があります。capture 属性は、デバイスのカメラまたはマイクを呼び出すために使用されます。 {と説明されています。 accept="audio/ or video/"の場合、captureの値は2つだけです。1つはuser用で、顔向きカメラ（例えば、電話の前面カメラ）を呼び出し、もう1つはenvi

2022-01-13 23:51:31
HTML5 の数値入力コードで整数値のみを受け付けるようにする

この2年間、これに関する記事や投稿をたくさん見てきましたが、本当にとても便利なものです。しかし、まだ穴のある実装、不自由な実装などが多すぎます。全体的なコンセプトは理にかなっています。HTML 5の属性を使ってサーバーに送信できるものを制限し、Javascriptを使ってそれを強化し、ユーザーがそもそも入力できるものを制限するのです。では、これらの問題点を踏まえて、より良い実装をしていきま

2022-01-13 21:27:46
videoタグによるストリーミング読み込みのhtml5実装

ビデオタグブラウザのvideoタグは通常src属性を受け取り、そのsrc属性に基づいてブラウザが自動的に動画を読み込む。この処理は、ブラウザが動画を読み込む際に行われます。この方法に問題はないのでしょうか？ mp4ファイルをストリーミングで読み込むことができない Webm、flv、hls およびその他のフォーマットの互換性の問題 {についてプレーヤーUIが醜すぎる、いくつかの一

2022-01-13 20:40:23
動画下の自動再生プロパティが無効な場合の解決方法（ミュートプロパティを追加する）。

背景 videoの下にogg形式の動画を読み込み、autoplay属性を設定したが、Chromeプレビューを使用すると、動画画面は読み込まれるが自動再生できない、F5リフレッシュ後は自動再生できる。F5リフレッシュ後は自動再生できる。初期のコードは以下の通りです。 <video autoplay="autoplay" loop="loop" class="aaa" >

2022-01-13 19:29:35
iframeとwindow.onloadの詳しい使い方

プリアンブルプロジェクトでは、ページの色を変更するメソッドを実行する前に、ページの読み込みが完了するのを待つ必要があるので、輸出は問題を解決するためにonloadを使用している、しかし、これは私が遭遇した問題を解決していない、私は私のプロジェクトのページがまだロードされていないことがわかったので、知って長い時間を投げた、それは、プロジェクトが操作する非常に古いiframeを使っているので、あな

2022-01-13 16:54:33
Html5は、コンテナは、画面の高さや残りの高さの適応的なレイアウトの実装を埋めることができます

フロントエンドのページレイアウトでは、コンテナを画面の高さいっぱい、あるいは画面の残りの高さいっぱいに配置する必要にしばしば遭遇します。通常、この時はheight:100%のCSSで記述することが当然となります。これは、コンテナの内容が書かれている場合は、時間の多くは問題ない、所望の効果を達成することができますが、コンテナの内容が比較的小さい場合は、十分な高さを保持するために、CSSのスタイルは

2022-01-13 16:03:45
html5 canvasベースの宿題添削用スモールプラグイン

今日は、会社からの新しい要望、つまり、返却された課題写真に添削を落書きして、添削が終わったら添削写真と一緒にサーバーにアップロードできるようにしたいのです。これは、キャンバスにあまり慣れていない私にとっては難題です。要求分析修正能力は絵筆に匹敵する筆おろしを行うことができること {を使用します。全ブラシクリア {を使用します。ブラシの色を変換するアイデアの技術的実現

2022-01-13 12:22:34
音声付き動画の自動再生機能の実装方法

音声付き動画自動再生条件です。上司ができる人を見れば、私たちもできるはずです。フロントエンド：自動再生、シンプルな... 実現方法：音を出しながらマウスオーバーで動画を再生し、一時停止できるように移動する，，，。質問集 1- 音のない自動再生の実装。 2- サウンド付きのオートプレイを実現するには？ 3- マウスオーバーとマウスアウトで実現する..

2022-01-13 08:45:40
H5 オフラインストレージマニフェストの原理と使い方

理解すること。オフラインストレージは、サイトのファイルをローカルに保存し、ネットワークなしで対応するサイトの保存されたページにアクセスすることができ、これらのファイルは、html、js、css、imgなどを含むことができます。しかし、実際には、ネットワークがある場合でも、ブラウザはオフラインで保存されたファイルを優先的に使用します。マニフェストとは。マニフェストとは、キャッシュする必要

2022-01-13 05:22:16
html2canvasで生成された画像のオフセットが不完全な場合の対処法

シナリオ1 問題の背景：生成された画像はポップアップウィンドウ内にあり、ページにスクロールバーがない場合は正常ですが、スクロールバーがあり、ページがスクロールすると、html2canvas で描画した画像は以下のようにスクロール高さに応じた白い枠でオフセットされます。ソリューション : そのオーナーは、この問題を解決するために、多くの情報をチェック

2022-01-13 03:35:18

最新

おすすめ