0

我正在用 oTree 在 Python 中编写一个实验，其中涉及在矩阵中查找一些字符的真正努力任务（每个页面中的矩阵都不同）。

为了避免受试者作弊，我想使用矩阵的图像而不是矩阵本身（这样受试者就不能使用搜索功能）。我在 oTree 中生成字符数组，并使用 vars_for_template 将其传递给 html。

我遇到了如何创建矩阵图像的问题。我不需要将矩阵存储在数据集中，所以我想将矩阵转换为html页面上的图像。但是我无法在 html 页面上隐藏原始矩阵，如果这样做，将没有矩阵的图像。

我使用类似于Convert Text to Images with JavaScript的方法，下面是我的代码：

<div>
<img id="textScreenshot" src="" />
</div>

<div id="random_matrix_html">
    {{ random_matrix_html }}
</div>

<br>

<style>
    table, th, td {
        border: 1px solid black;
    }
    table {
        width: 50%;
    }
    td {
        text-align: center;
    }
    th {
        display: none;
    }

</style>

<!-- Include the HTMl2Canvas library -->
<script src="//cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

<script>
  html2canvas(document.getElementById("random_matrix_html"), {
    onrendered: function (canvas) {
      var screenshot = canvas.toDataURL("image/png");
      document.getElementById("textScreenshot").setAttribute("src", screenshot);
    },
  });
</script>

这里，random_matrix_html是矩阵的html代码，我在html页面上设置样式。

有没有解决这个问题的好方法？也就是说，我只想在 html 页面上显示矩阵的图像而不是可搜索的矩阵。我对编码很陌生，所以如果这看起来是一个非常简单的问题，请提前道歉！

非常感谢！

4

0 回答 0