将图像添加到画布不允许将画布保存为图像
问题描述:
我在我的Fiddle中有2个画布示例。将图像添加到画布不允许将画布保存为图像
+第一个画布有一个圆,当我点击保存我可以将它保存为图像。
+第二个画布有一个img,但是当我点击保存时,我无法将它保存为图像。
我正在使用fabric.js。
为什么会发生这种情况?我如何将它保存为图像?
////- First Canvas -/////
var canvas1 = new fabric.Canvas('first');
//Added circle to first canvas
var circle = new fabric.Circle({
left: 20,
top: 10,
radius: 50,
fill: "#299b71"
});
canvas1.add(circle);
$("#save-first").click(function() {
window.open(canvas1.toDataURL('png'));
});
////- Second Canvas -/////
var canvas2 = new fabric.Canvas('second');
//Added img to second canvas
fabric.Image.fromURL("http://www.socialmediatoday.com/sites/default/files/post_main_images/alltwitter-twitter-bird-logo-white-on-blue_9.png", function(oImg) {
canvas2.add(oImg);
});
$("#save-second").click(function() {
window.open(canvas2.toDataURL('png'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.min.js"></script>
<canvas id="first" width="300" height="200"></canvas>
<button id="save-first">Save as img</button>
<canvas id="second" width="300" height="200"></canvas>
<button id="save-second">Save as img</button>
答
这是一个跨域脚本问题。您正在从twitter加载资源。它会工作,如果你加载本地资产。请注意控制台中的“操作不安全”消息。
未捕获SecurityError:未能在'HTMLCanvasElement'上执行'toDataURL':受污染的画布可能无法导出。 – Norx
在控制台 – Norx
中得到了上面的错误,就像我说的,这是一个跨站点脚本问题,而且这个问题是重复的。谷歌第一次下一次的错误信息:http://*.com/questions/20424279/canvas-todataurl-securityerror –