如何将矩阵转换为html中的图像？

问题描述

我正在使用 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 页面上显示矩阵的图像而不是可搜索的矩阵。我对编码很陌生，如果这看起来是一个非常简单的问题，请提前道歉！

非常感谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html javascript otree python