文章/答案/技术大牛

发布

问toDataURL()不是函数
EN

Stack Overflow用户

提问于 2017-04-18 08:18:12

回答 1查看 8.4K关注 0票数 0

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职能：

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()时。它给出了一个错误"Uncaught : c.toDataURL不是一个函数(…)“。

我的js文件在iframe中被调用。

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

javascript

canvas

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-04-18 10:14:26

我在这里看到几个问题：

canvas接口不支持 crossorigin属性。您确实应该允许中间img元素上的CORS存储从画布中捕获的图像。
从不同的文档访问嵌入在iframe中的画布可能不起作用，如果它们不在同一域中的话。也就是说，c = document.getElementById('myCanvas')将返回一个空的结果，因为在当前文档中找不到这个元素(这不是预期的)。使用下面的技术绕过这一点。

看起来就像你试图在保持画布不受污染的同时捕捉一幅图像。如果是这样的话，您可以使用这种方法

将您的CORS服务器配置为允许映像文件上的CORS。
在不污染画布的情况下从画布上捕获图像： var img =document.createElement(“画布”)，ctx = canvas.getContext("2d")，src = "http://example.com/image"；//插入图像url在这里=“匿名”；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；//确保加载事件对缓存的映像也会触发，如果( R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="；/ img.complete ===未定义){ img.src = "data:image/gif;base64 64，img.src img.src= src；}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/43467080

复制

相似问题

问toDataURL()不是函数
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问toDataURL()不是函数EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问toDataURL()不是函数
EN