toDataURL（）不是函数

Question

iFrame code: iFrame代码：

<iframe src="http://easyweb.site/embed.php?v=54f85644&amp;statTrack=&amp;w=512&amp;h=288&amp;iframe=1&amp;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 function: 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;
    }
}

in the above code function returns control to the caller before c.toDataURL() and doesn't print image data in console. 上面的代码函数中的c.toDataURL（）之前将控制权返回给调用者，并且不会在控制台中打印图像数据。 when I try to execute c.toDataURL() in console. 当我尝试在控制台中执行c.toDataURL（）时。 it gives a error "Uncaught TypeError: c.toDataURL is not a function(…)". 它给出一个错误“未捕获的TypeError：c.toDataURL不是一个函数（…）”。

My js file is called in an iframe 我的js文件在iframe中被调用

In the js file I create video tag and use the above canvas to get it's data. 在js文件中，我创建了视频标签，并使用上面的画布获取了数据。 How to correct this code? 如何更正此代码？

Answer 1

I see several issues here: 我在这里看到几个问题：

The canvas interface does not support the crossorigin attribute. canvas界面不支持 crossorigin属性。
You should really be allowing CORS on an intermediate img element to store captured images from the canvas. 您确实应该允许中间img元素上的CORS存储从画布捕获的图像。
Accessing a canvas embedded in an iframe from a different document may not work, if they're not on the same domain. 如果它们不在同一域中，则无法从其他文档访问嵌入到iframe中的画布。
ie 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). 即c = document.getElementById('myCanvas')将返回空结果，因为在当前文档中找不到该元素（这不是预期的元素）。 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 : 在这种情况下，您可以按照以下方法进行操作：

Configure your webserver to allow CORS on image files. 配置您的Web服务器以允许对图像文件进行CORS。

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（）不是函数

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-04-18 10:14:26

toDataURL（）不是函数

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-04-18 10:14:26

解决方案1
0 已采纳 2017-04-18 10:14:26