我拼命想要解决这个问题,我发现的所有信息都没有提供解决方案。我查看了StackOverflow上的相关问题,虽然我看到了代码,但我无法解决问题。
我创建了一个失败的JSFiddle。这是代码:
var canvas = window._canvas = new fabric.Canvas('c');
fabric.imagePlaceholder = fabric.util.createClass(fabric.Text, {
type: 'imagePlaceholder',
initialize: function(text, options) {
options || (options = { });
console.log('imagePlaceholder', text, options);
this.callSuper('initialize', text, options);
this.set('imageId', options.imageId || '');
this.set('text', 'Loading ' + text || 'Loading...');
this.set('type', 'imagePlaceholder');
},
toObject: function() {
return fabric.util.object.extend(this.callSuper('toObject'), {
imageId: this.get('imageId'),
type: this.get('type'),
});
},
_render: function(ctx) {
this.callSuper('_render', ctx);
ctx.font = '20px Arial';
ctx.fillStyle = '#333';
ctx.fillText(this.label, -this.width/2, -this.height/2 + 20);
},
});
fabric.imagePlaceholder.fromObject = function (object, callback) {
var _enlivenedObjects;
fabric.util.enlivenedObjects(object.objects, function (enlivenedObjects) {
delete object.objects;
_enlivenedObjects = enlivenedObjects;
});
return new fabric.imagePlaceholder(_enlivenedObjects, object);
};
// Added or not it doesn't work :(
fabric.imagePlaceholder.async = true;
newObject = new fabric.imagePlaceholder('cat_image.jpg', {imageId:Date.now()});
canvas.add(newObject);
var json = window._json = canvas.toJSON();
console.log(json);
//Comment out the following to see the 'undefined' object being created..
//canvas.clear();
//canvas.loadFromJSON(json);
本质上,我正在创建一个自定义类,因此我可以将保存的状态从服务器加载为JSON,将其加载到画布中,然后遍历对象,找到占位符并用我们的安全图像服务中的图像替换它们。问题是,我似乎无法克服异步问题。有什么想法吗?
提前致谢,
乔纳森
答案 0 :(得分:0)
几个小时之后我遇到了同样的问题,看看代码
type: 'imagePlaceholder'
转换为CamelCase,以便在重新读取JSON数据时访问该对象
fabric.imagePlaceholder = ...
需要
fabric.ImagePlaceholder = ...
为了让它起作用