問題タブ [pixelate]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
2 に答える
1186 参照

node.js - ノードjsで画像をピクセル化する

私が今していることは、すべてのピクセルをvar getPixels = require("get-pixels")で取得してから、次のコードでピクセルの配列をループすることです:

この方法の問題点は、結果の画像がシャープすぎることです。ここに画像の説明を入力

私が探しているのは、ImageMagick -sale で行われたこれに似たものです

ここに画像の説明を入力

2番目に使用したコマンドは

この方法の問題は、実際のピクセル サイズを指定する方法がわからないことです。

forそのループで2番目の結果を取得することは可能ですか。または、 imagemagick -scale を使用することをお勧めしますが、数学に役立つ人がいる場合は、実際のピクセルサイズを大きくすることができます。

0 投票する
0 に答える
373 参照

javascript - Scaling-Pixelated (補間/アンチエイリアシングなし) アルゴリズムが遅いのはなぜですか? 最適化?

私は今のところ、主にクライアント側に焦点を当てて、Web デザインに真剣に取り組むことにしました。私は、低解像度の画像を組み込んで、ピクセル化された外観にするために拡大するいくつかのデザインに取り組んできました。問題は、さまざまなブラウザーやさまざまなマシンでテストするときに、さまざまな品質に遭遇し続けることです。これまでのところ、ピクセル化された結果を取得する 2 つのかなり単純な方法 (以下を参照) を発見しました。これは 90% の確率で機能します。これらのソリューションはどちらも、最新バージョンの Firefox、Chrome、Safari、Opera、および Vivaldi で鮮明なピクセル化を生成します。ただし、私の古いコンピューターでテストしたところ、さまざまなレベルのぼやけがあり、さまざまなブラウザーでテストしました。さらに検索すると、キャンバス コンテキストで ImageData() を呼び出し、そのデータを新しい画像に適用してから、その画像をキャンバスに描画して再スケーリングするという 3 番目のソリューション (以下を参照) を思いつきました。このソリューションは、すべてのテストで鮮明な画像を作成するのに最適です。問題は、私のアルゴリズムの実行が最初の 2 つのソリューションよりも 100 倍遅いことです。レスポンシブ Web アプリを設計しようとすると、これが問題を引き起こしている可能性がありますが、この秒単位はほとんど目立ちません。アルゴリズムを高速化する方法はありますか? それとも、古いマシンと代替ブラウザのサポートをあきらめるべきですか? レスポンシブ Web アプリを設計しようとすると、これが問題を引き起こしている可能性がありますが、この秒単位はほとんど目立ちません。アルゴリズムを高速化する方法はありますか? それとも、古いマシンと代替ブラウザのサポートをあきらめるべきですか? レスポンシブ Web アプリを設計しようとすると、これが問題を引き起こしている可能性がありますが、この秒単位はほとんど目立ちません。アルゴリズムを高速化する方法はありますか? それとも、古いマシンと代替ブラウザのサポートをあきらめるべきですか?

  1. CSS ソリューション

    /li>

ここに画像の説明を入力

  1. ImageSmoothingEnabled=false

    /li>

ここに画像の説明を入力

  1. カスタム JavaScript

    /li>

ここに画像の説明を入力

(クロスオリジンの問題): 一部のブラウザでは、ローカル ファイルを処理するためにセキュリティを無効にする必要があります。

FireFox: デフォルトで動作

Safari: まず、開発メニューを有効にする必要があります。[開発] メニューをクリックし、[ローカル ファイルの制限を無効にする] を選択します。

Chrome: ターミナル: "open -a "Google Chrome" --args --allow-file-access-from-files"

Opera: 端末: "open -a Opera --args --allow-file-access-from-files"

Vivaldi: ターミナル: "open -a Vivaldi --args --allow-file-access-from-files"