【发布时间】：2016-03-05 15:26:27
【问题描述】：
我有以下代码，当用户按下按钮时执行。它
- 连接到网络服务，
- 从中获取图像，
- 将其存储在
myDataURL变量中并 - 将其显示在画布上。
代码如下：
function downloadButtonPressed() {
var username = $("input#username").val();
var password = $("input#password").val();
$.ajax({
type: "GET",
url: "http://myserver/myapp/map",
headers: {
"Authorization": "Basic " + btoa(username + ":" + password),
},
crossDomain: true,
xhrFields: {
withCredentials: true
},
success: function (data, status, xhr) {
alert("success");
}
}).fail(function ($xhr) {
console.log("response: " + $xhr);
var myDataURL = "data:image/png;base64," + $xhr.responseText;
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
context.drawImage(this, 0, 0, canvas.width, canvas.height);
};
img.src = myDataURL;
});
}
这是我按下下载按钮后浏览器窗口的样子：
现在我想让该图像成为画布的背景图像，以便在其上添加其他对象（例如矩形、其他图像）。
我该怎么做？
官方FabricJS tutorial推荐这个：
var myDataURL = "data:image/png;base64," + $xhr.responseText;
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
// context.drawImage(this, 0, 0, canvas.width, canvas.height);
};
img.src = myDataURL;
canvas.setBackgroundImage(myDataURL, canvas.renderAll.bind(canvas));
然后我收到以下错误：
更新1（02.12.2015 13:23 MSK）：无论我使用哪种方法，下载后背景图片一点击就消失了。
Here 是一个视频，它显示了我的意思。
更新 2（02.12.2015 13:28 MSK）：
这是当前版本的代码：
选项 1：
function ($xhr) {
var myDataURL = "data:image/png;base64," + $xhr;
var canvas = new fabric.Canvas('canvas');
var img = new Image();
img.onload = function() {
var f_img = new fabric.Image(img);
canvas.setBackgroundImage(f_img);
canvas.renderAll();
};
img.src = myDataURL;
}
选项 2：
function ($xhr) {
var myDataURL = "data:image/png;base64," + $xhr;
var canvas = new fabric.Canvas('canvas');
canvas.setBackgroundImage(myDataURL, canvas.renderAll.bind(canvas));
}
更新 3（02.12.2015 14:07 MSK）：
如果我尝试使用以下代码向画布添加一个矩形，也会出现同样的问题。
function rectButtonPressed() {
var canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
height: 20
});
canvas.add(rect);
}
首先，它出现了，但是当我点击画布时，它又变空了。
【问题讨论】：
-
因为画布可能会被垃圾收集。将 canvas = new fabric.Canvas('canvas') 设为全局变量并使其始终保持“活动”状态。在你的所有函数中只引用canvas变量，不要再次初始化它
-
@Dmitri Pisarenki：您是否能够纠正您问题的“更新 2 和 3”场景？接受的答案是否处理了您提出的所有场景？即使答案中提到的渲染调用，我也面临同样的问题..有什么提示吗？
标签： javascript canvas fabricjs