Question

我正在使用http://cburgmer.github.io/rasterizeHTML.js/将html变成画布。当我将代码更改为：

var canvas = document.getElementById("save_image_canvas");
// rasterizeHTML.drawHTML('<div style="font-size: 20px;">Some <span style="color: green">HTML</span> with an image</div>', canvas);
rasterizeHTML.drawHTML(document.getElementById("mattes").innerHTML, canvas);

我在控制台中收到以下错误：

在＆＃39; Mysite / Custom_App /＆＃39;中阻止脚本执行因为文档的框架是沙盒的，并且“允许 - 脚本”＃39;权限未设置。

所有脚本和内容都位于同一台服务器上。

这是完整的功能：

function common_screenshot()
{
  var canvas = document.getElementById("save_image_canvas");
  if (typeof(moulding_canvas) === "undefined")
  {
    canvas.height = parseInt($("#matte_canvas").height());
    canvas.width = parseInt($("#matte_canvas").width());
  }
  else
  {
    canvas.height = parseInt($("#moulding_canvas").height());
    canvas.width = parseInt($("#moulding_canvas").width());
  }
  canvas.style.backgroundColor = "#FFFFFF";

  var moulding_top = -1 * parseInt(document.getElementById("moulding_canvas").style.top);
  var moulding_left = -1 * parseInt(document.getElementById("moulding_canvas").style.left);

  console.log("top: " + moulding_top);
  rasterizeHTML.drawHTML(document.getElementById("mattes").innerHTML).then(function (renderResult) 
  {
    context.drawImage(renderResult.image, moulding_left, moulding_top);
  });
  var ctx = canvas.getContext('2d');
  ctx.drawImage(matte_canvas, moulding_left, moulding_top);
  if (typeof(moulding_canvas) !== "undefined")
  {
    ctx.drawImage(moulding_canvas, 0, 0);
  }
  var image = new Image();
    image.src = canvas.toDataURL("image/jpeg");
  return image;
}

rasterizeHTML产生的图像在屏幕上显示正常，但是当我调用canvas.toDataURL时，结果的图像全黑。

Answer 1

根据错误消息判断，您使用的是基于Webkit的浏览器，很可能是Chrome。当<iframe>元素here试图运行JavaScript时（只有在该属性中指定allow-scripts时才会显示），会显示此错误消息（介绍sandbox attribute）。查看rasterizeHTML源代码可以看出函数createHiddenSandboxedIFrame()创建了这样一个框架。它用于calculateDocumentContentSize()，文档的内容被复制到临时沙盒框架中以测量它们的大小。显然，该文档还包含一些<script>标记，这些标记会导致错误（不是因为脚本来源，而是因为通常不允许使用脚本）。

现在您的代码当然不会调用calculateDocumentContentSize()。它由由函数drawDocumentImage()调用的函数doDraw()调用的函数rasterizeHTML.drawDocument()调用，由函数rasterizeHTML.drawHTML()调用。最后，问题确实存在：您传入的HTML代码包含<script>标记。

鉴于在您正在绘制的HTML代码上执行脚本似乎不是意图（没有executeJS选项），您应该能够简单地将<script>标记移动到其他位置，所以它们不在mattes元素内。如果这是不可能的，您仍然可以在源代码上运行一些正则表达式来删除所有脚本标记，例如：

var code = document.getElementById("mattes").innerHTML;
code = code.replace(/<\/?script\b.*?>/g, "");
rasterizeHTML.drawHTML(code, canvas);

修改：ondrop属性等内联事件处理程序当然也会触发该警告。您也可以删除这些：

code = code.replace(/ on\w+=".*?"/g, "");

请注意，这只会帮助您摆脱警告。我怀疑这个警告是导致图像空白的原因 - 所以你可能需要再问一个问题。

Answer 2

@WladimirPalant有一个很好的描述。如果您在无法控制的网站上遇到此问题，可以使用以下命令启动Chrome，Chrome会接受这些脚本。

视窗：

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --args --allow-scripts

Linux的：

google-chrome --args --allow-scripts

为什么我收到阻止的脚本执行错误？

2 个答案: