Question

我正在尝试将一张图片加载到我的页面上的div中，然后尝试传入图像的原始数据，或尝试将图像复制到某个位置。

我能找到的最佳方法是使用html2canvas

尝试将图像打开到预览窗口时出现以下错误：

JavaScript运行时错误：IndexSizeError

我已经阅读了一些帖子，建议我可以使用以下方法渲染div：

html2canvas($("#mapDiv"), {
            onrendered: function (canvas) {
                // canvas is the final rendered <canvas> element
                var imgData = canvas.GetContext("2d").getImageData(bounds.left, bounds.top, bounds.width, bounds.height);
                var myImage = imgData.toDataURL("image/png");
                window.open(myImage);
            }
        });

问题出现在html2canvas js文件中的以下行

ctx.drawImage(canvas, bounds.left, bounds.top, bounds.width, bounds.height, 0, 0, bounds.width, bounds.height);

是否有可能以这种方式渲染动态加载到div中的图像，因为由于用户具有不同的分辨率而无法传递像素参数

如果有可能，我做错了什么？

Answer 1

$i = 0;
$counter = 1;
$split = 0;
foreach ($array as $i => $value) {
if($split >= 10) {
    echo "<br /><br /><br /><br />";
    $split = 0;
}
if(++$counter % 2 === 0) {
    echo "<div style='width:100%; text-align:center;'>";
    echo "<table>";
    echo "<tr><td class='value'>Name</td></tr>";
} else {
    echo "<tr><td class='value'>Status</td></tr>";
    $change = 'Error';
    if (isset($_SESSION['old_value'][$i])) {
    $change = ($value - $_SESSION['old_value'][$i]);
        if ($change >= 10) {
            echo "<tr><td class='update'>".$change."</td></tr>";
            echo "</table>";
            echo "</div>";
            $split++;
        } else {
            echo "<tr><td class='value'>".$change."</td></tr>";
            echo "</table>";
            echo "</div>";
            $split++;
        }
    } else {
        echo "<td class='value'>0</td>";
    }
    $_SESSION['old_value'][$i] = $value;
}
}

传递您想要快照的元素的ID。

html2canvas - IndexSizeError

1 个答案: