タグ：画像処理：記事一覧
ブラウザのCanvas要素に描画した画像を、BMP形式でダウンロードしてみます。CanvasのtoDataURL()は、画像データをPNGやJPEG形式に変換して、データＵＲＬを生成してくれます。FirefoxはtoDataURL()の引数にimage/bmpを指定すると、BMP形式に変換してくれます。
このカテゴリに記事は、PHPやをJavaScript使ったプログラミングについて、実際にやったことを中心に紹介します。
最近サイトのAMP化を始めたのですが、imgタグをamp-imgに変換する際に幅と高さが必要になりました。しかしimgタグで指定されたいないため、画像ファイルから取得する必要があります。そこでローカルまたはWebサーバーの画像から、幅と高さを取得するコードを作成しました。
DOM要素のanimateメソッドを使用すると、CSSの@keyframesと同じような感覚で要素のアニメーションを制御できます。JQueryにも同名のメソッドがありますが、今回はWeb Animations API のメソッドについて紹介します。
JavaScriptのCanvasAPIにはtranslateやscaleなどの変換メソッドがあります。しかし変換をリセットするメソッドが存在しません。そこで、変換内容をリセットする方法をお伝えします。
JavaScriptのCanvasAPIを使用すると、ブラウザに図形を描画できます。しかし左下を原点としてグラフを描画しようとすると、少し手間取ることがあります。どうすればいいのでしょうか。
最近Node.jsで画像を処理する案件に遭遇しました。その際にSharpというモジュールを使用しましたが、日本語の資料があまりないのでここでまとめておきます。
ウェブサイトを作成していると、時々OGP画像をセットしたほうがいいような気がしてきます。しかしサイトの記事が多い状態から一つ一つ画像を作成していくのは、いまさら無理なお話です。そこで、画像を一枚だけ用意して、その画像に記事タイトルを描画することで妥協することにしました。ただし、画像サイズが大きいのは不利な面があるので、しっかり最適化します。
JavaScriptのCanvasAPIを利用すると、canvas要素に描画をおこなうことができます。CanvasAPIの使い方と、利用できるメソッドについてまとめてみました。
JavaScriptでCanvasに描画していたら、SecurityErrorが出ました。原因を調べてみました。
JavaScriptのCanvasAPIで描画をするとき、頻繁に使用するパスはPath2Dを使用すると何度でも使いまわすことができます。アニメーションなどを表現するなら、とても便利な機能です。そこで今回は、Path2Dについてお伝えします。
JavaScriptのCanvasAPI にisPointInPath()というメソッドがあります。パス内に指定した座標が含まれているかどうか確認するメソッドですが、どんなケースで使用するのか不明でした。そこで自分なりに使用目的を考えてみたところ、ブラウザ用で図形の内側がクリックされたかどうかの確認できると思いいたりました。そこでデモとして、クリックした図形を塗りつぶすJavaScriptコードを作成しました。
今回はURLで指定された画像を読み込むJavaScriptコードを作成してみます。読み込みエラー時の処理も、しっかりと作りこみます。
htmlのCanvas要素をJavaScrptで動的に追加すると、うまく表示してくれないことがあります。その原因の一つが、タグ上とcss上のサイズ指定の動作が異なるという点です。理解すれば単純なことですが、理解せずにCanvasを使用するとハマります。
