我有一个帆布drawimage()作为背景.
我有一个橡皮擦工具,我希望能够擦除我绘制的内容,但不能删除画布中的图像.我知道可以将图像作为画布后面的单独元素放置,但这不是我想要的,因为我希望将画布中的内容保存为图像.
我的绘图功能在这里:
function draw (event) {
if (event == 'mousedown') {
context.beginPath();
context.moveTo(xStart, yStart);
} else if (event == 'mousemove') {
context.lineTo(xEnd, yEnd);
} else if (event == 'touchstart') {
context.beginPath();
context.moveTo(xStart, yStart);
} else if (event == 'touchmove') {
context.lineTo(xEnd, yEnd);
}
context.lineJoin = "round";
context.lineWidth = gadget_canvas.radius;
context.stroke();
}
Run Code Online (Sandbox Code Playgroud)
如果我需要进一步解释,我会.
先感谢您.
我想在我得到它之前在画布上绘制一个图像dataURL(),但返回的数据就像是空的.
当我在控制台中检查它时,我看到A字符串中有很多:( "data:image/png;base64,iVBO..some random chars... bQhfoAAAAAAAAAA... a lot of A ...AAAASUVORK5CYII=")
当我尝试将画布附加到文档时,也没有绘制任何内容,并且我没有在控制台中抛出任何错误.
这里有什么问题 ?
这是我的代码:
var img = new Image();
img.src = "http://somerandomWebsite/picture.png";
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
var context = canvas.getContext('2d');
context.drawImage(img, 0,0); // this doesn't seem to work
var dataURL = canvas.toDataURL(); // this will give me a lot of "A"
doSomething(dataURL);
Run Code Online (Sandbox Code Playgroud)
此外,在快速刷新时,图像被正确地绘制到画布上,但我在控制台中有一条错误消息并且dataURL是空的.
Firefox中的消息是:"SecurityError:操作不安全." ,
在Chrome中,它是"未捕获的安全错误:无法在'HTMLCanvasElement'上执行'toDataURL':可能无法导出受污染的画布." ,
在IE上,我只得到"SecurityError".
这是什么意思 ?