toDataURL（）不是函數

的iFrame代碼：toDataURL（）不是函數

<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 TypeError：c.toDataURL不是函數（...）」。

我的js文件被稱爲在iframe

在js文件創建的視頻標籤，並用上面的帆布獲得它的數據。如何更正此代碼？

來源

2017-04-18 arun

您可以登錄並看到的document.getElementById的值（ 'myCanvas'）;可能會出現這種情況，這是在dom的畫布加載之前執行的 –

任何你在初始化之後重寫'c'兩次的原因？ – GottZ

沒有理由覆蓋c。只是爲了確保在使用toDataURL（）之前獲得了c。但是，即使在刪除第二行後，它也不起作用。 – arun

我看到幾個問題在這裏：

的canvas接口does not support的crossorigin屬性。
您應該真的允許在中間img元素上的CORS存儲來自畫布的捕獲圖像。
如果它們不在同一個域中，從其他文檔訪問嵌入在iframe中的畫布可能無法正常工作。
即c = document.getElementById('myCanvas')將返回一個空結果，因爲在當前文檔中找不到該元素（這不是預期的結果）。使用下面的技術繞過這一點。

它看起來像你試圖同時使帆布玷污捕捉圖像。如果是這樣的話，你可以按照this approach：

配置你的服務器，以允許在圖像文件CORS。

捕獲了畫布的圖像，而不玷污它：

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

來源

2017-04-18 10:14:26

toDataURL（）不是函數

回答

相關問題