toDataURL() keine Funktion

iFrame-Code:toDataURL() keine Funktion

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

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

im obigen Code Funktion zurückkehrt, bevor c.toDataURL den Anrufer steuern() und wird nicht gedruckt Bilddaten in der Konsole. wenn ich versuche, c.toDataURL() in der Konsole auszuführen. Es gibt einen Fehler "Uncaught TypeError: c.toDataURL ist keine Funktion (...)".

Meine js-Datei wird in einem Iframe genannt

In der js Datei-I-Video-Tag und verwenden Sie die oben Leinwand erstellen, um es Daten. Wie wird dieser Code korrigiert?

Quelle

2017-04-18 arun

können Sie sich einloggen und den Wert der document.getElementById ('myCanvas') sehen; könnte der Fall sein, wo dies vor dem Laden von Canvas in dom –

aus irgendeinem Grund ausgeführt wird, die Sie "c" zwei Mal überschreiben, nachdem Sie es initialisiert haben? – GottZ

Kein Grund zum Überschreiben c. nur um sicherzustellen, dass ich das c vor der Verwendung von toDataURL() bekomme. Aber auch nach dem Entfernen der zweiten Zeile funktioniert es nicht. – arun

Ich sehe einige Probleme hier:

Die canvas Schnittstelle does not support das crossorigin Attribut.
Sie sollten CORS auf einem Zwischenelement img wirklich erlauben, erfasste Bilder aus der Zeichenfläche zu speichern.
Der Zugriff auf eine Arbeitsfläche, die in einen Iframe aus einem anderen Dokument eingebettet ist, funktioniert möglicherweise nicht, wenn sie sich nicht in derselben Domäne befinden.
d. H. c = document.getElementById('myCanvas') wird ein leeres Ergebnis zurückgeben, da dieses Element nicht im aktuellen Dokument gefunden wird (was nicht das erwartete ist). Umgehen Sie dies mit der folgenden Technik.

Es sieht aus wie Sie versuchen, ein Bild zu erfassen, während die Leinwand untainted verlassen. Wenn dies der Fall ist, können Sie this approach folgen:

Konfigurieren Sie Ihren Webserver CORS auf Image-Dateien zu ermöglichen.

-Capture ein Bild von der Leinwand ab, ohne tainting:

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

Quelle

2017-04-18 10:14:26

toDataURL() keine Funktion

Antwort

Verwandte Themen