javascript - 使用 jquery(和 | 或)与 Canvas 比较两个 HTML 元素 View

Question

我有如下所示的文本 DIV。我只针对非 IE 和 webkit 浏览器。

一个:

<div id="target1"> Some<sup>en</sup> <i><b>text</b></i> </div>

上面一行看起来像:Some^en text with style

第二个:

<div id="target2"> Some<sup>en</sup> <span class='boldIt'>text</span></div>
.boldIt{
   font-weight : bold;
   font-style : italic;
}

看起来和上面一样。根据观点两者是相同的。但下面与上面不同

<div id="target3"> Someen text</div>

我的要求是比较三个目标元素。

我尝试过的:我尝试遍历 DIV 的每个子节点并使用 getComputedStyle() 匹配样式。但是我可以看到页面上发生了很大的性能问题。因为涉及到的案例太多了。

有idea，无奈，给一个IDEA在 Canvas 上绘制两个元素并比较两个 Canvas ，就像比较两个图像一样。这真的可能吗？如果可能的话，当我将一个内联元素与 block 级元素进行比较时，它会改变比较的行为吗？

请给我建议。如果没有想法，我会坚持使用 HTML 方式，就像我之前提到的那样。

我试过了this使用 Canvas ，我的目标只是 Chrome。 Antony 的回答与我的要求完全吻合。但在下面的情况下，我找不到办法做到这一点

for(var i = 0; i < arr.length; i++){
  var htStr = arr[i].one, htStr2 = arr[i].two;
  // How can I match these two now...
} 

Answer 1

你对使用 <canvas> 的想法是可能的。

参见 DEMO (已在 Chrome、Safari 和 Opera 上测试)。

您可以使用 html2canvas 将以下内容转换为 3 个不同的 Canvas , 并比较它们的 base64 字符串以确定它们在视觉上是否相同。您应该将它们包装在单独的容器中，以便所有文本都呈现在 Canvas 中。

<div id="target1-container">
    <div id="target1"> Some<sup>en</sup> <i><b>text</b></i> </div>
</div>
<div id="target2-container">
    <div id="target2"> Some<sup>en</sup> <span class='boldIt'>text</span></div>
</div>
<div id="target3-container">
    <div id="target3"> Someen text</div>
</div>

转换为 canvas 和 base64 字符串，使用 async.js处理多个异步调用:

async.parallel({
    target1: function (callback) {
        html2canvas(document.getElementById("target1-container"), {
            onrendered: function (canvas) {
                callback(null, canvas.toDataURL());
            }
        });
    },
    target2: function (callback) {
        html2canvas(document.getElementById("target2-container"), {
            onrendered: function (canvas) {
                callback(null, canvas.toDataURL());
            }
        });
    },
    target3: function (callback) {
        html2canvas(document.getElementById("target3-container"), {
            onrendered: function (canvas) {
                callback(null, canvas.toDataURL());
            }
        });
    }
},
function (err, results) {
    console.log(results);
});

---

关于你更新的问题，这里有一个函数来比较由字符串定义的元素的视觉外观:

function compare(arr, fn) {
    // create test div
    var testdiv = document.createElement("div");
    testdiv.style.marginTop = '1000px';
    document.body.appendChild(testdiv);
    async.map(
        arr,
        function (data, callback) {
            var htStr = data.one,
                htStr2 = data.two;
            // create elements from strings
            var el = document.createElement("div"),
                el2 = document.createElement("div");
            el.innerHTML = htStr;
            testdiv.appendChild(el);
            el2.innerHTML = htStr2;
            testdiv.appendChild(el2);
            // convert to canvas and base64 strings
            async.parallel([
                function (callback) {
                    html2canvas(el, {
                        onrendered: function (canvas) {
                            callback(null, canvas.toDataURL());
                        }
                    });
                },
                function (callback) {
                    html2canvas(el2, {
                        onrendered: function (canvas) {
                            callback(null, canvas.toDataURL());
                        }
                    });
                }
            ],
            // start comparison
            function (err, results) {
                if (results[0] === results[1]) {
                    callback(null, true);
                } else {
                    callback(null, false);
                }
            });
        },
        // callback function
        function (err, results) {
            document.body.removeChild(testdiv);
            if (typeof fn === 'function') {
                fn(results);
            }
        }
    );
}
// elements to be tested
var arr = [];
arr.push({
    one: '<div id="target1"> Some<sup>en</sup> <i><b>text</b></i> </div>',
    two: '<div id="target2"> Some<sup>en</sup> <span class="boldIt">text</span></div>'
});
arr.push({
    one: '<div id="target1"> Some<sup>en</sup> <i><b>text</b></i> </div>',
    two: '<div id="target3"> Someen text</div>'
});
// let the test begin
compare(arr, function (result) {
    console.log(result);
});

它在回调函数中返回一个数组，带有

• true意味着元素在视觉上是相同的，并且
• false这意味着它们是不同的。

请参阅 this DEMO 中的控制台.