toDataURL()不是函数 [英] toDataURL() not a function
问题描述
iFrame代码:
<iframe src="http://easyweb.site/embed.php?v=54f85644&statTrack=&w=512&h=288&iframe=1&trimmingType=thumb"
width="512" height="288" frameborder="0" scrolling="no"
id="set_video_image_popup_iframe">
#document
<html>
<head></head>
<body>
<div class="videobox">
<video id="media-video"></video>
</div>
<canvas id="myCanvas" crossorigin="Anonymous" style="width: 538px; height: 288px;"></canvas>
</body>
</html>
</iframe>
JS函数:
var getThumbData = function() {
var b = document.createElement('a');
b.href = $('#set_video_image_popup_iframe').attr('src');
var a = document.createElement('a');
a.href = document.referrer;
var imageData = 'hello';
if (a.pathname == '/member/video.php' && window.location.pathname == '/embed.php') {
var video = document.getElementById('media-video');
var videoCurrentTime = document.getElementById('media-video').currentTime;
var canvasWidth = $('video').width();
var canvasHeight = $('video').height();
var c = $('body').append($('<canvas>', {
id: 'myCanvas',
width: canvasWidth,
height: canvasHeight,
crossOrigin: 'Anonymous'
}));
$('body').append('<button id="btn"></button>');
var ctx;
c = document.getElementById('myCanvas');
ctx = c.getContext("2d");
alert('in here');
ctx.drawImage(video, 0, 0, canvasWidth, canvasHeight);
alert('1');
alert(c);
imageData = c.toDataURL();
console.log(imageData);
alert('2');
window.open(imageData, "toDataURL() image", "width=600, height=200");
return imageData;
}
}
上面的代码函数中的
将控制权返回给c.toDataURL()之前的调用者，并且不会在控制台中打印图像数据.当我尝试在控制台中执行c.toDataURL()时.它会给出错误未捕获的TypeError:c.toDataURL不是函数(…)".
in the above code function returns control to the caller before c.toDataURL() and doesn't print image data in console. when I try to execute c.toDataURL() in console. it gives a error "Uncaught TypeError: c.toDataURL is not a function(…)".
我的js文件在iframe中被调用
My js file is called in an iframe
在js文件中，我创建了视频标签，并使用上面的画布获取了它的数据.如何更正此代码?
In the js file I create video tag and use the above canvas to get it's data. How to correct this code?
推荐答案
我在这里看到了几个问题:
I see several issues here:
The
canvasinterface does not support thecrossoriginattribute.
You should really be allowing CORS on an intermediateimgelement to store captured images from the canvas.
从不同文档访问嵌入在iframe中的画布可能无法正常工作，如果它们不在同一域中.
即 c = document.getElementById('myCanvas')将返回空结果，因为在当前文档中找不到该元素(这不是预期的元素).使用以下技术绕过此操作.
Accessing a canvas embedded in an iframe from a different document may not work, if they're not on the same domain.
i.e. c = document.getElementById('myCanvas') will return an empty result, as this element is not found on the current document (which is not the expected one). Bypass this using the technique below.
您似乎正在尝试捕获图像，同时又保持画布不变.在这种情况下，您可以遵循此方法:
It looks like you're attempting to capture an image while leaving the canvas untainted. If this is the case, you can follow this approach:
-
配置您的Web服务器以允许对图像文件进行CORS.
Configure your webserver to allow CORS on image files.
从画布上捕获图像而不会对其造成污染:
Capture an image off of the canvas without tainting it:
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()不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
