Question

iFrame代码：

Tile

JS功能：

{this.props.currentlyOpenedTile === tile.id ? <TileDetail /> : null}

在上面的代码函数中，在c.toDataURL（）之前将控制权返回给调用者，并且不在控制台中打印图像数据。当我尝试在控制台中执行c.toDataURL（）时。它给出了一个错误“Uncaught TypeError：c.toDataURL不是一个函数（...）”。

我的js文件在iframe中调用

在js文件中，我创建了视频标签并使用上面的画布来获取它的数据。如何更正此代码？

Answer 1

我在这里看到几个问题：

canvas界面does not support crossorigin属性您应该在中间img元素上允许CORS存储来自画布的捕获图像。
如果它们不在同一个域中，则从其他文档访问嵌入在iframe中的画布可能无效。
即c = document.getElementById('myCanvas')将返回一个空结果，因为在当前文档中找不到此元素（这不是预期的文件）。使用以下技术绕过它。

看起来你正试图捕捉图像，同时让画布无污染。如果是这种情况，您可以关注this approach：

配置您的网络服务器以允许图像文件上的CORS。

从画布上捕捉图像而不会弄乱它：

var img = new Image,
    canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d"),
    src = "http://example.com/image"; // insert image url here

img.crossOrigin = "Anonymous";

img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    localStorage.setItem("savedImageData", canvas.toDataURL("image/png"));
}
img.src = src;
// make sure the load event fires for cached images too
if (img.complete || img.complete === undefined) {
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
    img.src = src;
}

toDataURL（）不是函数

1 个答案: