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>

无法获取内容的画布toDataURL

1 个答案: