Javascript 无法获取内容的canvas toDataURL

我无法将此圆形图像保存为png

在这里，我得到了控制台中的空白画布作为基本代码

任何人请告诉我如何将画布内容（如rouneded图像）保存为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);

---

您需要等待图像加载后才能尝试使用它

除此之外，你不能在受污染的画布上调用

toDataURL

。污染画布是指在画布中绘制了来自其他域的图像的画布，除非您都请求使用该图像的权限，并且服务器授予您使用该图像的权限

例如，imgur的服务器通常会授予权限。要请求权限，您需要设置

img.crossOrigin

。见：

//获取画布和绘图上下文
var canvas=document.getElementById（'c'）；
var ctx=canvas.getContext（'2d'）；
//创建一个图像元素
var img=document.createElement（'img'）；
//加载图像后，绘制它
img.onload=函数（）{
//保存状态，以便我们可以撤消剪辑
ctx.save（）；
//创建一个圆
ctx.beginPath（）；
ctx.arc（106,77,74,0，Math.PI*2，false）；
//剪辑到当前路径
ctx.clip（）；
ctx.drawImage（img，0,0）；
//撤消剪辑
ctx.restore（）；
var base=canvas.toDataURL（）；
控制台日志（基本）；
}
//指定我们要向服务器请求使用此映像的权限
img.crossOrigin=“匿名”；
//指定要加载映像的src
img.src=”http://i.imgur.com/gwlPu.jpg";
在尝试使用图像之前，需要等待图像加载

除此之外，你不能在受污染的画布上调用
toDataURL
。污染画布是指在画布中绘制了来自其他域的图像的画布，除非您都请求使用该图像的权限，并且服务器授予您使用该图像的权限

例如，imgur的服务器通常会授予权限。要请求权限，您需要设置
img.crossOrigin
。见：


//获取画布和绘图上下文
var canvas=document.getElementById（'c'）；
var ctx=canvas.getContext（'2d'）；
//创建一个图像元素
var img=document.createElement（'img'）；
//加载图像后，绘制它
img.onload=函数（）{
//保存状态，以便我们可以撤消剪辑
ctx.save（）；
//创建一个圆
ctx.beginPath（）；
ctx.arc（106,77,74,0，Math.PI*2，false）；
//剪辑到当前路径
ctx.clip（）；
ctx.drawImage（img，0,0）；
//撤消剪辑
ctx.restore（）；
var base=canvas.toDataURL（）；
控制台日志（基本）；
}
//指定我们要向服务器请求使用此映像的权限
img.crossOrigin=“匿名”；
//指定要加载映像的src
img.src=”http://i.imgur.com/gwlPu.jpg";
控制台中是否有错误？你真的在加载映像之前呼叫基线吗？控制台中是否有错误？你真的在图像加载前调用基线吗？添加了一个示例添加了一个示例