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

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);

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

在'Mysite/Custom_App /'中阻止执行脚本,因为文档的框架是沙箱,并且未设置'allow-scripts'权限.

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

这是完整的功能:

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.当具有属性的元素尝试运行JavaScript时(仅在该属性中指定时允许),将显示此错误消息(此处介绍).查看rasterizeHTML源代码,可以看出函数createHiddenSandboxedIFrame()创建了这样一个框架.它用于,文档的内容被复制到临时沙盒框架中,以测量它们的大小.显然,该文档还包含一些标记,这些标记会导致错误(不是因为脚本原因,而是因为脚本通常是不允许的).<iframe>sandboxallow-scriptscalculateDocumentContentSize()<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, "");

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