Question

我的代码在chrome中执行正确，但在HtmlUnit中不正确。 javascript代码是：

function convert_twovalue(image_data) {
        for (var x = 0; x < image_data.width; x++) {
            for (var y = 0; y < image_data.height; y++) {
                var i = x*4+y*4*image_data.width;

                if (image_data.data[i] > 128) {
                    image_data.data[i] = 255;
                    image_data.data[i+1] = 255;
                    image_data.data[i+2] = 255;
                    image_data.data[i+3] = 255;
                    document.getElementById("1").innerHTML = document.getElementById("1").innerHTML + "-" + image_data.data[i+2] + "-";
                }
                else {
                    image_data.data[i] = 0;
                    image_data.data[i+1] = 0;
                    image_data.data[i+2] = 0;
                    image_data.data[i+3] = 255;
                    document.getElementById("1").innerHTML = document.getElementById("1").innerHTML + "-" + image_data.data[i+2] + "-";
                }


            }
        }
    }

Chrome中的结果类似 -255--255 ，但HtmlUnit中的结果类似 -203--210 。 HtmlUnit中的结果似乎不正确。为什么？

我完成的代码如下所示。此代码仅用于调试，而不是最终代码。

<!DOCTYPE HTML>
<html>
<body>
    <canvas id="myCanvas" width="60" height="20" style="boder:1px solid #c3c3c3;">
        Your browser does not support the canvas element.
    </canvas>
    <br>
    <canvas id="destCanvas1" width="9" height="12" style="boder:1px solid #c3c3c3;">
        Your browser does not support the canvas element.
    </canvas>
    <br>
    <canvas id="destCanvas2" width="9" height="12" style="boder:1px solid #c3c3c3;">
        Your browser does not support the canvas element.
    </canvas>
    <br>
    <canvas id="destCanvas3" width="9" height="12" style="boder:1px solid #c3c3c3;">
        Your browser does not support the canvas element.
    </canvas>
    <br>
    <canvas id="destCanvas4" width="9" height="12" style="boder:1px solid #c3c3c3;">
        Your browser does not support the canvas element.
    </canvas>
    <br>
    <div id="1"></div>
    <div id="2"></div>
    <div id="3"></div>
    <div id="4"></div>

    <script type="text/javascript">
        var compareNum = Array(0, 0, 0, 0);
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");

        var img = new Image();
        img.src = "http://127.0.0.1:8080/fundtest/checkNumber.png";
        //img.src = "http://127.0.0.1:8080/fundtest/common/checkNumber.jsp";

        img.onload = function(){
            // try {
                ctx.drawImage(img, 0, 0);
                var imgData = ctx.getImageData(0, 0, c.width, c.height);
                convert_grey(imgData);
                sleep(500);
                convert_twovalue(imgData);
                sleep(500);
                remove_distraction(imgData)
                sleep(500);
                ctx.putImageData(imgData, 0, 0); 

                image_division("destCanvas1", 6, 4);

                image_division("destCanvas2", 19, 4);

                image_division("destCanvas3", 32, 4);

                image_division("destCanvas4", 45, 4);



                for (var k = 0; k < 10; k++) {
                    compare("destCanvas1", k, "1");
                }

                for (var k = 0; k < 10; k++) {
                    compare("destCanvas2", k, "2");
                }

                for (var k = 0; k < 10; k++) {
                    compare("destCanvas3", k, "3");
                }

                for (var k = 0; k < 10; k++) {
                    compare("destCanvas4", k, "4");
                }
            // }
            // catch (e) {alert(e.message)} 
        }



        function convert_grey(image_data) {
            for (var x = 0; x < image_data.width; x++) {
                for (var y=0; y < image_data.height; y++) {
                    var i = x*4+y*4*image_data.width;
                    var luma = Math.floor(image_data.data[i] * 299/1000 +
                        image_data.data[i+1] * 587/1000 + 
                        image_data.data[i+2] * 114/1000);
                    image_data.data[i] = luma;
                    image_data.data[i+1] = luma;
                    image_data.data[i+2] = luma;
                    image_data.data[i+3] = 255;
                }
            }
        }

        function convert_twovalue(image_data) {
            for (var x = 0; x < image_data.width; x++) {
                for (var y = 0; y < image_data.height; y++) {
                    var i = x*4+y*4*image_data.width;

                    if (image_data.data[i] > 128) {
                        image_data.data[i] = 255;
                        image_data.data[i+1] = 255;
                        image_data.data[i+2] = 255;
                        image_data.data[i+3] = 255;
                        document.getElementById("1").innerHTML = document.getElementById("1").innerHTML + "-" + image_data.data[i+2] + "-";
                    }
                    else {
                        image_data.data[i] = 0;
                        image_data.data[i+1] = 0;
                        image_data.data[i+2] = 0;
                        image_data.data[i+3] = 255;
                        document.getElementById("1").innerHTML = document.getElementById("1").innerHTML + "-" + image_data.data[i+2] + "-";
                    }


                }
            }
        }

        function remove_distraction(image_data) {
            for (var x = 0; x < image_data.width; x++) {
                for (var y = 0; y < image_data.height; y++) {
                    if ((x >= 0 && x <= 5) ||
                        (x >= 15 && x <= 18) ||
                        (x >= 28 && x <= 31) ||
                        (x >= 41 && x <= 44) ||
                        (x >= 54 && x <= 59) || 
                        (y >= 0 && y <=3) ||
                        (y >= 16 && y <= 19)) {
                        var i = x*4+y*4*image_data.width;
                        image_data.data[i] = 255;
                        image_data.data[i+1] = 255;
                        image_data.data[i+2] = 255;
                        image_data.data[i+3] = 255;
                    }
                }
            }
        }

        function convertToImage(canvas) {
            var image = new Image();
            image.src = canvas.toDataURL("image/png");
            return image;
        }

        function image_division(destCanvasID, posX, posY) {
            var destC = document.getElementById(destCanvasID);
            var destCtx = destC.getContext("2d");
            var destImg = convertToImage(c);

            destImg.onload = function() {
                try {
                    destCtx.drawImage(destImg, posX, posY, 9, 12, 0, 0, 9, 12);
                    var destImgData = destCtx.getImageData(0, 0, destC.width, destC.height);
                    destCtx.putImageData(destImgData, 0, 0);
                }
                catch (e) {alert(e.message)} 
            }
        }

        function compare(destCanvasID, compareID, destID) {

            var compareC = document.createElement("canvas");
            var compareCtx = compareC.getContext("2d");

            var compareImg = new Image();
            compareImg.src = "http://127.0.0.1:8080/fundtest/" + compareID + ".png";

            compareImg.onload = function() {
                var count = 0;
                compareCtx.drawImage(compareImg, 0, 0);
                var compareImgData = compareCtx.getImageData(0, 0, 9, 12);

                var destC = document.getElementById(destCanvasID);
                var destCtx = destC.getContext("2d");
                var destImgData = destCtx.getImageData(0, 0, 9, 12);

                for (var x = 0; x < destImgData.width; x++) {
                    for (var y=0; y < destImgData.height; y++) {
                        var i = x*4+y*4*destImgData.width;
                        if (destImgData.data[i] - compareImgData.data[i] == 0) {
                            count++;
                        }
                    }
                }

                // document.getElementById(destID).innerHTML = document.getElementById(destID).innerHTML + compareID + ":" + count + "--";
                if (compareNum[destID-1] < count) {
                    compareNum[destID-1] = count;
                }
            }
        }

        function sleep(numberMillis) { 
            var now = new Date(); 
            var exitTime = now.getTime() + numberMillis; 
            while (true) { 
            now = new Date(); 
            if (now.getTime() > exitTime)
                return; 
            } 
        }
    </script>
</body>
</html>

我的java代码如下所示。目标是获取网页的结果。

package demo;

import java.io.IOException;
import java.net.MalformedURLException;

import com.gargoylesoftware.htmlunit.BrowserVersion;
import com.gargoylesoftware.htmlunit.FailingHttpStatusCodeException;
import com.gargoylesoftware.htmlunit.WebClient;
import com.gargoylesoftware.htmlunit.html.HtmlDivision;
import com.gargoylesoftware.htmlunit.html.HtmlPage;
import com.gargoylesoftware.htmlunit.javascript.background.JavaScriptJobManager;

public class HtmlUnitTest {

    @SuppressWarnings({ "resource", "deprecation" })
    public static void main(String[] args) throws FailingHttpStatusCodeException, MalformedURLException, IOException {
        // TODO Auto-generated method stub
        WebClient webClient = new WebClient(BrowserVersion.FIREFOX_38);
        webClient.getOptions().setCssEnabled(false);
        webClient.getOptions().setJavaScriptEnabled(true);

        HtmlPage page = webClient.getPage("http://127.0.0.1:8080/fundtest/demo1.html");
        JavaScriptJobManager manager = page.getEnclosingWindow().getJobManager();
        while (manager.getJobCount() > 0) {
            try {
                Thread.sleep(1000000);
            } catch (InterruptedException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }
//      HtmlDivision div1=(HtmlDivision)page.getElementById("1");
//      HtmlDivision div2=(HtmlDivision)page.getElementById("2");
//      HtmlDivision div3=(HtmlDivision)page.getElementById("3");
//      HtmlDivision div4=(HtmlDivision)page.getElementById("4");
        String s = page.asXml();


//      System.out.println(div1.asText() + div2.asText() + div3.asText() + div4.asText());
        System.out.println(s);
        webClient.closeAllWindows();
    }

}

名为checkNumber.png的图片喜欢此 enter image description here

Answer 1

ImageData是只读的，现在已在SVN中修复，测试用例已创建here。

您可以从here获取最新版本（如果成功，则在一小时内）（始终检查创建日期和时间）。

作为附注，我想如果您使用以下情况，您的案例将会有效：

var data = image_data.data;
data[i] = 255;
... use data[i]

为什么htmlunit的结果与chrome的结果不同？

1 个答案: