javascript - 为什么我的缩放像素化（无插值/抗锯齿）算法很慢？优化？

Question

我决定认真对待网页设计，目前主要关注客户端。我一直在研究一些包含低分辨率图像并放大以获得像素化外观的设计。问题是在不同的浏览器和不同的机器下测试时，我总是遇到质量参差不齐的问题。到目前为止，我发现了 2 种相当简单的方法（见下文）来获得像素化结果，90% 的时间都有效：一种通过修改 css 属性，另一种通过更改 js 中的画布上下文变量。这两种解决方案都会在最新版本的 Firefox、Chrome、Safari、Opera 和 Vivaldi 中产生清晰的边缘像素化；虽然，在我的旧电脑上进行测试时，我在不同的浏览器上测试时有不同程度的模糊。经过进一步搜索，我提出了第三种解决方案（见下文），涉及在画布上下文中调用 ImageData()，并将该数据应用到新图像，然后将该图像绘制到画布并重新缩放。在我的所有测试中，该解决方案在创建清晰图像方面做得最好。问题是我的算法运行速度比前 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：终端：“打开 -a “谷歌浏览器”--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 - 为什么我的缩放像素化（无插值/抗锯齿）算法很慢？优化？

0 回答 0

Related

Reference