How to avoid toDataURL executes before window.onload

Question

canvas.toDataURL() returns blank image. Because it executes before window.onload

window.onload = function() {
  var canvas = document.getElementById('myCanvas');
  var video = document.getElementById('video');
  var context = canvas.getContext('2d');
  context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
}

var canvas = document.getElementById('myCanvas');
var photo = canvas.toDataURL('image/png');
console.log(photo);
$.ajax({
  method: 'POST',
  url: 'script.php',
  data: {
    photo: photo
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="myCanvas" width="578" height="200"></canvas>
<video id="video" src="http://www.w3schools.com/html/mov_bbb.mp4"></video>

draw the image perfectly in windows onload only the problem is dataurl returns blank because it executes first. How to solve this

nmak18 · Accepted Answer · 2019-06-25T10:19:16.537

0

I would recommend using video.oncanplay (The canplay event occurs when the browser can start playing the specified audio/video (when it has buffered enough to begin) w3 link) event instead of window.onload.

please find the working code below, hope this helps:

    var video = document.getElementById("video");
video.oncanplay = function() {
  var canvas = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");
  context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
  var canvas = document.getElementById("myCanvas");
  var photo = canvas.toDataURL("image/png");
  console.log(photo);
  $.ajax({
    method: "POST",
    url: "script.php",
    data: {
      photo: photo
    }
  });
};

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <canvas id="myCanvas" width="578" height="200"></canvas>
    <video id="video" src="https://dl.dropboxusercontent.com/s/yacmy685uenthji/mov_bbb.mp4" crossorigin="anonymous"></video>

edited Jun 25 '19 at 10:19

answered Jun 25 '19 at 05:06

nmak18

1,059
8
24

it givesSecurityError: The operation is insecure. so i cant fetch the result image – erova Jun 25 '19 at 08:37
@erova, when do you get the above error? Is the PHP file and the html hosted on the same domain? – nmak18 Jun 25 '19 at 08:43
@erova, I have edited my answer. Error is mainly due to CORS restriction (as the video is being served from www.w3schools.com.). To over come that, will have to make sure that the video is served with the correct Access-Control-Allow-Origin header. Or its is hosted on the same domain. For more details kindly referrer to https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror – nmak18 Jun 25 '19 at 10:25

Julius Limson · Answer 2 · 2019-06-25T05:28:21.837

waiting on the onload function to finished loading by using async. or inserting the rest of your code inside your onload function.

on async function e.g. )

function loadlast() {    
      var canvas = document.getElementById('myCanvas');
      var photo = canvas.toDataURL('image/png');
      console.log(photo);
      $.ajax({
        method: 'POST',
        url: 'script.php',
        data: {
          photo: photo
        }
      });
      console.log("load last");

  }      

window.onload = async function() {  
    var canvas = document.getElementById('myCanvas');
    var video = document.getElementById('video');
    var context = canvas.getContext('2d');
    context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
    console.log("load first")
    //setTimeout(alert("4 seconds"),4000);
    await loadlast();         
}

more reference for async function https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

How to avoid toDataURL executes before window.onload

2 Answers2