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

Question

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

CSS ソリューション

<html>
    <head>
        <title>css image-rendering...</title>
        <style>
            #myimg {
                image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
                image-rendering: -moz-crisp-edges;          /* Firefox                        */
                image-rendering: -o-crisp-edges;            /* Opera                          */
                image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
                image-rendering: pixelated;                 /* Chrome */
                image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
                -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
            }
        </style>
    </head>
    <body>
        <img id="myimg"/>
    </body>
    <script>
        var imgin = new Image();
        imgin.src = "./bill64.png";
        var imgframe = document.getElementById("myimg");
        imgin.onload = function(){
            var magnfctn = 16; //magnify by this
            imgframe.width = imgin.width*magnfctn;
            imgframe.height = imgin.height*magnfctn;
            imgframe.src = "./bill64.png";
        }
    </script>
</html>

ImageSmoothingEnabled=false

<html>
    <head>
        <title>ImageSmoothingEnabled=false</title>
    </head>
    <body>
        <canvas width="256" height="256" id="myCanvas"></canvas>
    </body>
    <script>
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        var imgin = new Image();
        imgin.src = "./pig64.png";
        imgin.onload = function(){//**Edit: Thanks Kaiido, performance slightly improved**
            var magnfctn = 16; //magnify by this
            //ctx.drawImage(imgin, 0, 0);
            //var imgData = ctx.getImageData(0, 0, imgin.width, imgin.height);
            c.width = imgin.width*magnfctn;
            c.height = imgin.height*magnfctn;
            ctx.msImageSmoothingEnabled = false;
            ctx.mozImageSmoothingEnabled = false;
            ctx.webkitImageSmoothingEnabled = false;
            ctx.imageSmoothingEnabled = false;
            ctx.scale(magnfctn,magnfctn);
            //ctx.putImageData(imgData, 0, 0);
            ctx.drawImage(imgin, 0, 0);
        }
    </script>
</html>

カスタム JavaScript

<html>
    <head>
        <title>No Interpol...</title>
    </head>
    <body>
        <canvas width="256" height="256" id="myCanvas"></canvas>
    </body>
    <script>
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        var imgin = new Image();
        imgin.src = "./macaque64.png";
        imgin.onload = function(){
            var magnfctn = 16; //magnify by this
            ctx.drawImage(imgin, 0, 0);
            var imgData = ctx.getImageData(0, 0, imgin.width, imgin.height);
            var largeData = ctx.createImageData(imgin.width*magnfctn, imgin.height*magnfctn);
            for (var i=0;i<imgData.data.length;i+=4) {
                for(var x=0;x<magnfctn;x++){
                    for(var y=0;y<magnfctn;y++){
                        largeData.data[magnfctn*i+4*x +
                                       magnfctn*imgin.width*4*y +
                                       4*imgin.width*magnfctn*(magnfctn-1)*Math.floor(i/4/imgin.width)] =
                                       imgData.data[i];//red
                        largeData.data[magnfctn*i+4*x +
                                       magnfctn*imgin.width*4*y +
                                       1+4*imgin.width*magnfctn*(magnfctn-1)*Math.floor(i/4/imgin.width)] =
                                       imgData.data[i+1];//green
                        largeData.data[magnfctn*i+4*x +
                                       magnfctn*imgin.width*4*y +
                                       2+4*imgin.width*magnfctn*(magnfctn-1)*Math.floor(i/4/imgin.width)] =
                                       imgData.data[i+2];//blue
                        largeData.data[magnfctn*i+4*x +
                                       magnfctn*imgin.width*4*y +
                                       3+4*imgin.width*magnfctn*(magnfctn-1)*Math.floor(i/4/imgin.width)] =
                                       imgData.data[i+3];//alpha
                    }
                }
            }
            c.width = imgin.width*magnfctn;
            c.height = imgin.height*magnfctn;
            ctx.putImageData(largeData, 0, 0);
        }
    </script>
</html>

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

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"

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

0 に答える 0

Related

Reference