一旦画布设置了背景图片，canvas.toDataURL('png')方法就失效了。

Question

我已经使用以下代码设置了画布的背景图像:

canvas.setBackgroundImage(source, canvas.renderAll.bind(canvas));

它的运行效果很好，但现在我的...

canvas.toDataURL('png')

停止工作。

而且清除画布并不会清除背景图像。 请问我哪里出错了。

以下代码正常运行，直到我添加了一个背景图像。

document.getElementById('save').onclick = function() {       
   window.open(canvas.toDataURL('png')); 
} 

此外：

canvas.clear(); 

代码没有清除背景图片。

- John

---

你的控制台是否出现了安全错误？ 如果图像来自不同的域，canvas.toDataURL() 将无法工作（http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-canvas-todataurl，https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image） canvas.clear() 无法移除背景图片。您可以使用 canvas.setBackgroundImage()。 - Kienz

控制台中没有显示任何错误。我打开了一个包含base-64数据的新窗口，但是图片没有显示出来。 - John

你用哪个浏览器？如果你用IE9，它不起作用（https://github.com/kangax/fabric.js/issues/172）。在Chrome中，它对我有效。 - Kienz

我做了一个小的jsfiddle：http://jsfiddle.net/Kienz/XuVEh/ - Kienz

更新了 jsfiddle - 现在使用 setBackgroundImage，它仍然有效。你测试过了吗？ - Kienz

Answer 1

var canvas = window._canvas = new fabric.Canvas('c');

变量画布=窗口._canvas=new织物.画布('c');

canvas.setBackgroundImage(document.getElementById('img1').src, canvas.renderAll.bind(canvas));

document.getElementById('dataurl').addEventListener('click', function () {
    window.open(canvas.toDataURL());
});

- John