Question

我有一个函数，我已经从codegolf的答案中改变了（因为原来的答案实际上没有用）。

基本上它所做的就是获取图像的像素，将它们加密，然后将加扰的图像输出到页面上。

这是我的代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    img {
      min-width: 500px;
      min-height: 500px;
    }
  </style>
</head>

<body>
  <img src="test.jpg" alt="" />
  <script>
    function scramble(el) {
      "use strict";
      var V = document.createElement('canvas');
      var W = V.width = el.width,
        H = V.height = el.height,
        C = V.getContext('2d');

      C.drawImage(el, 0, 0);

      var id = C.getImageData(0, 0, W, H),
        D = id.data,
        L = D.length,
        i = L / 4,
        A = [];

      for (; --i;) A[i] = i;

      function S(A) {
        var L = A.length,
          x = L >> 3,
          y, t, i = 0,
          s = [];

        if (L < 8) return A;

        for (; i < L; i += x) s[i / x] = S(A.slice(i, i + x));

        for (i = 4; --i;) y = [6, 4, 7, 5, 1, 3, 0, 2][i], t = s[i], s[i] = s[y], s[y] = t;

        s = [].concat.apply([], s);

        return s;
      }
      var N = C.createImageData(W, H),
        d = N.data,
        A = S(A);

      for (var i = 0; i < L; i++) d[i] = D[(A[i >> 2] * 4) + (i % 4)];

      C.putImageData(N, 0, 0);

      el.src = C.canvas.toDataURL("image/jpeg", 1.0);
    }

    scramble(document.querySelector("img"));
  </script>
</body>

</html>

现在，问题在于Chrome，与FF，Edge和IE不同，它们都按预期显示，chrome只显示图像所在的黑色方块。

我不能为我的生活找出原因，特别是因为所有其他浏览器都按预期工作。

以下是其他浏览器的屏幕截图，显示精细和镀铬的黑色方块。

正如你所看到的，所有其他浏览器都没问题，但是只是没有按预期执行，也没有抛出任何控制台错误，或者有任何明显的原因导致无法工作，这令人沮丧。

无论如何，有任何问题，请在评论中询问。

Answer 1

尝试在scramble元素load元素

的<img>事件中致电

document.querySelector("img").onload = function() {
   scramble(this)
};

from bs4 import BeautifulSoup

def extract_header_from_summary_from_report_htmltestrunner():
    filename = (r"C:\temp\selenium_report\ClearCore501_Automated_GUI_TestReport.html")    html_report_part = open(filename,'r')
    soup = BeautifulSoup(html_report_part, "html.parser")
    table = soup.select_one("#result_table")
    headers = [td.text for td in table.select_one("#header_row").find_all("td")[1:-1]]
    yield (" ".join(headers))
    for row in table.select("tr.passClass"):
        yield " ".join([td.text for td in row.find_all("td")[1:-1]])

Answer 2

提供的代码 document.querySelector（＆＃34; img＆＃34;）。onload = function（）{ 加扰（本） }; 使图像非常迅速地加扰和解读。它不会创建静态加扰渲染。此外，缺少代码会离开Chrome 显示原始的静态形式未解读的图片。

Chrome无法按预期渲染画布数据[JS / Canvas API]

2 个答案: