CODEWITHSUNDEEP
javascriptcanvas
arun
arun

Reputation: 165

toDataURL() not a function

iFrame code:

<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:

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. when I try to execute c.toDataURL() in console. it gives a error "Uncaught TypeError: c.toDataURL is not a function(…)".

My js file is called in an iframe

In the js file I create video tag and use the above canvas to get it's data. How to correct this code?

Upvotes: 0

Views: 10121

Answers (1)

Eliran Malka
Eliran Malka

Reputation: 16263

I see several issues here:

  • The canvas interface does not support the crossorigin attribute.
    You should really be allowing CORS on an intermediate img element to store captured images from the canvas.

  • 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:

  1. Configure your webserver to allow CORS on image files.

  2. 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;
}

Upvotes: 1

Related Questions