Невозможно получить холст toDataURL содержимого

Question

Я не могу сохранить это округленное изображение в формате png.

Здесь я получаю пустой холст в качестве базового кода в консоли.

Кто-нибудь. Скажите, пожалуйста, как я могу сохранить содержимое холста, например, округленное изображение, в виде кода png или base 64.

// Grab the Canvas and Drawing Context
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');



// Create an image element
var img = document.createElement('IMG');

// When the image is loaded, draw it
img.onload = function () {

// Save the state, so we can undo the clipping
ctx.save();


// Create a circle
ctx.beginPath();
ctx.arc(106, 77, 74, 0, Math.PI * 2, false);

// Clip to the current path
ctx.clip();


ctx.drawImage(img, 0, 0);

// Undo the clipping
ctx.restore();
}

// Specify the src to load the image
img.src = "http://i.imgur.com/gwlPu.jpg";

var base = canvas.toDataURL();
console.log(base);

Answer 1

Вам нужно подождать, пока изображение загрузится, прежде чем пытаться его использовать.

Кроме того, вы не можете назвать toDataURL на испорченных холстах. Испорченные холсты - это холсты, на которых были нарисованы изображения из других доменов, если только вы не запросите разрешение на использование изображения И сервер не предоставит вам разрешение на использование изображения.

Для вашего примера серверы imgur обычно дают разрешение. Для запроса разрешения вам необходимо установить img.crossOrigin. Смотри: https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

// Grab the Canvas and Drawing Context
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');



// Create an image element
var img = document.createElement('IMG');

// When the image is loaded, draw it
img.onload = function () {

  // Save the state, so we can undo the clipping
  ctx.save();


  // Create a circle
  ctx.beginPath();
  ctx.arc(106, 77, 74, 0, Math.PI * 2, false);

  // Clip to the current path
  ctx.clip();


  ctx.drawImage(img, 0, 0);

  // Undo the clipping
  ctx.restore();
  
  var base = canvas.toDataURL();
  console.log(base);
}

// Specify we want to ask the server for permission to use this image
img.crossOrigin = "anonymous";

// Specify the src to load the image
img.src = "http://i.imgur.com/gwlPu.jpg";

<canvas id="c"></canvas>