每当我将一个图像添加到fabric.js上的画布时，我将其保存并在隐藏字段中将其字符串化为JSON，来自JSON数据的加载画布在console.log上有0个对象，隐藏字段中有JSON数据/变量不完整。如果我加载已经被字符串化的JSON数据，则插入图像并且是我可以编辑的JSON中唯一的对象。我的程序通过添加文本，形状等来保存到JSON，但是当我添加图像时，就会发生这种情况。
以下是我用来添加图片的代码。
function insertImage(src){
fabric.Image.fromURL(src, function(image) {
var scale = 200 / image.width;
image.set({ left: 40, top: 40, scaleX: scale, scaleY: scale });
canvas.centerObject(image);
canvas.add(image);
canvas.renderAll();
});
}
$( ".image-graphic" ).click(function(){
var imageGraphic = $( this ).attr('src');
insertImage(imageGraphic);
});
以下是在此之后运行的代码，当它将其转换为隐藏字段中的JSON数据时。
$( "#testImage" ).click(function(){
var $additionalPropertiesData = canvas.toJSON(['selectable','lockmovementX', 'lockmovementY', 'hasControls', 'hasBorders', 'id']);
$( ".frontData" ).val(JSON.stringify($additionalPropertiesData));
var $frontPreviewData = $( ".frontData" ).val();
});
这是插入图像之前JSON数据的样子
{
"objects": [
{
"type": "i-text",
"originX": "center",
"originY": "top",
"left": 544.68,
"top": 144.16,
"width": 307.75,
"height": 65.54,
"fill": "#000",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1.36,
"scaleY": 1.36,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"selectable": true,
"hasControls": true,
"hasBorders": true,
"id": "fullName",
"text": "YOUR NAME",
"fontSize": "50",
"fontWeight": "bold",
"fontFamily": "PT Serif",
"fontStyle": "",
"lineHeight": 1.16,
"textDecoration": "",
"textAlign": "center",
"textBackgroundColor": "",
"styles": {}
},
{
"type": "i-text",
"originX": "center",
"originY": "top",
"left": 544.68,
"top": 228.48,
"width": 135.85,
"height": 28.84,
"fill": "#000",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1.36,
"scaleY": 1.36,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"selectable": true,
"hasControls": true,
"hasBorders": true,
"id": "jobTitle",
"text": "Your Job Title",
"fontSize": 22,
"fontWeight": "normal",
"fontFamily": "PT Serif",
"fontStyle": "",
"lineHeight": 1.16,
"textDecoration": "",
"textAlign": "center",
"textBackgroundColor": "",
"styles": {}
},
{
"type": "i-text",
"originX": "left",
"originY": "top",
"left": 45.02,
"top": 472.44,
"width": 109.35,
"height": 20.97,
"fill": "#000",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1.36,
"scaleY": 1.36,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"selectable": true,
"hasControls": true,
"hasBorders": true,
"id": "phoneNumber",
"text": "O:888.888.8888",
"fontSize": "16",
"fontWeight": "normal",
"fontFamily": "PT Serif",
"fontStyle": "italic",
"lineHeight": 1.16,
"textDecoration": "",
"textAlign": "left",
"textBackgroundColor": "",
"styles": {}
},
{
"type": "i-text",
"originX": "center",
"originY": "top",
"left": 544.68,
"top": 384.88,
"width": 237.27,
"height": 28.84,
"fill": "#000",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1.36,
"scaleY": 1.36,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"selectable": true,
"hasControls": true,
"hasBorders": true,
"id": "companyName",
"text": "COMPANY NAME HERE",
"fontSize": 22,
"fontWeight": "normal",
"fontFamily": "PT Serif",
"fontStyle": "",
"lineHeight": 1.16,
"textDecoration": "",
"textAlign": "center",
"textBackgroundColor": "",
"styles": {}
},
{
"type": "i-text",
"originX": "left",
"originY": "top",
"left": 461.61,
"top": 436.56,
"width": 122.17,
"height": 18.35,
"fill": "#000",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1.36,
"scaleY": 1.36,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"selectable": true,
"hasControls": true,
"hasBorders": true,
"id": "addressLineOne",
"text": "Company Address 1",
"fontSize": "14",
"fontWeight": "normal",
"fontFamily": "Open Sans",
"fontStyle": "italic",
"lineHeight": 1.16,
"textDecoration": "",
"textAlign": "left",
"textBackgroundColor": "",
"styles": {}
},
{
"type": "i-text",
"originX": "center",
"originY": "top",
"left": 544.68,
"top": 474.64,
"width": 87.47,
"height": 18.35,
"fill": "#000",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1.36,
"scaleY": 1.36,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"selectable": true,
"hasControls": true,
"hasBorders": true,
"id": "addressLineTwo",
"text": "Address Line 2",
"fontSize": "14",
"fontWeight": "normal",
"fontFamily": "PT Serif",
"fontStyle": "italic",
"lineHeight": 1.16,
"textDecoration": "",
"textAlign": "center",
"textBackgroundColor": "",
"styles": {}
},
{
"type": "i-text",
"originX": "left",
"originY": "top",
"left": 47.08,
"top": 433.17,
"width": 107.83,
"height": 20.97,
"fill": "#000",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1.36,
"scaleY": 1.36,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"selectable": true,
"hasControls": true,
"hasBorders": true,
"id": "cellNumber",
"text": "C:888.888.8888",
"fontSize": "16",
"fontWeight": "normal",
"fontFamily": "PT Serif",
"fontStyle": "italic",
"lineHeight": 1.16,
"textDecoration": "",
"textAlign": "left",
"textBackgroundColor": "",
"styles": {}
},
{
"type": "i-text",
"originX": "right",
"originY": "top",
"left": 1044.34,
"top": 433,
"width": 153.52,
"height": 20.97,
"fill": "#000",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1.36,
"scaleY": 1.36,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"selectable": true,
"hasControls": true,
"hasBorders": true,
"id": "emailAddress",
"text": "youremail@email.com",
"fontSize": "16",
"fontWeight": "normal",
"fontFamily": "PT Serif",
"fontStyle": "italic",
"lineHeight": 1.16,
"textDecoration": "",
"textAlign": "right",
"textBackgroundColor": "",
"styles": {}
},
{
"type": "i-text",
"originX": "right",
"originY": "top",
"left": 1042.98,
"top": 472.44,
"width": 172.43,
"height": 20.97,
"fill": "#000",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1.36,
"scaleY": 1.36,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"selectable": true,
"hasControls": true,
"hasBorders": true,
"id": "webAddress",
"text": "www.websiteaddress.com",
"fontSize": "16",
"fontWeight": "normal",
"fontFamily": "PT Serif",
"fontStyle": "italic",
"lineHeight": 1.16,
"textDecoration": "",
"textAlign": "right",
"textBackgroundColor": "",
"styles": {}
}
],
"background": "",
"backgroundImage": {
"type": "image",
"originX": "left",
"originY": "top",
"left": 0,
"top": 0,
"width": 1088,
"height": 638,
"fill": "rgb(0,0,0)",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1,
"scaleY": 1,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"src": "/images/sample.jpg",
"filters": [],
"crossOrigin": "",
"alignX": "none",
"alignY": "none",
"meetOrSlice": "meet"
}
}
插入图像后会发生这种情况。此JSON数据无法正确加载，并在console.log上显示带有0个对象的画布。
{
"objects": [
{
"type": "i-text",
"originX": "center",
"originY": "top",
"left": 544.68,
"top": 144.16,
"width": 307.75,
"height": 65.54,
"fill": "#000",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1.36,
"scaleY": 1.36,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"selectable": true,
"hasControls": true,
"hasBorders": true,
"id": "fullName",
"text": "YOUR NAME",
"fontSize": "50",
"fontWeight": "bold",
"fontFamily": "PT Serif",
"fontStyle": "",
"lineHeight": 1.16,
"textDecoration": "",
"textAlign": "center",
"textBackgroundColor": "",
"styles": {}
},
{
"type": "i-text",
"originX": "center",
"originY": "top",
"left": 544.68,
"top": 228.48,
"width": 135.85,
"height": 28.84,
"fill": "#000",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1.36,
"scaleY": 1.36,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"selectable": true,
"hasControls": true,
"hasBorders": true,
"id": "jobTitle",
"text": "Your Job Title",
"fontSize": 22,
"fontWeight": "normal",
"fontFamily": "PT Serif",
"fontStyle": "",
"lineHeight": 1.16,
"textDecoration": "",
"textAlign": "center",
"textBackgroundColor": "",
"styles": {}
},
{
"type": "i-text",
"originX": "left",
"originY": "top",
"left": 45.02,
"top": 472.44,
"width": 109.35,
"height": 20.97,
"fill": "#000",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1.36,
"scaleY": 1.36,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"selectable": true,
"hasControls": true,
"hasBorders": true,
"id": "phoneNumber",
"text": "O:888.888.8888",
"fontSize": "16",
"fontWeight": "normal",
"fontFamily": "PT Serif",
"fontStyle": "italic",
"lineHeight": 1.16,
"textDecoration": "",
"textAlign": "left",
"textBackgroundColor": "",
"styles": {}
},
{
"type": "i-text",
"originX": "center",
"originY": "top",
"left": 544.68,
"top": 384.88,
"width": 237.27,
"height": 28.84,
"fill": "#000",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1.36,
"scaleY": 1.36,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"selectable": true,
"hasControls": true,
"hasBorders": true,
"id": "companyName",
"text": "COMPANY NAME HERE",
"fontSize": 22,
"fontWeight": "normal",
"fontFamily": "PT Serif",
"fontStyle": "",
"lineHeight": 1.16,
"textDecoration": "",
"textAlign": "center",
"textBackgroundColor": "",
"styles": {}
},
{
"type": "i-text",
"originX": "left",
"originY": "top",
"left": 461.61,
"top": 436.56,
"width": 122.17,
"height": 18.35,
"fill": "#000",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1.36,
"scaleY": 1.36,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"selectable": true,
"hasControls": true,
"hasBorders": true,
"id": "addressLineOne",
"text": "Company Address 1",
"fontSize": "14",
"fontWeight": "normal",
"fontFamily": "Open Sans",
"fontStyle": "italic",
"lineHeight": 1.16,
"textDecoration": "",
"textAlign": "left",
"textBackgroundColor": "",
"styles": {}
},
{
"type": "i-text",
"originX": "center",
"originY": "top",
"left": 544.68,
"top": 474.64,
"width": 87.47,
"height": 18.35,
"fill": "#000",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1.36,
"scaleY": 1.36,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"selectable": true,
"hasControls": true,
"hasBorders": true,
"id": "addressLineTwo",
"text": "Address Line 2",
"fontSize": "14",
"fontWeight": "normal",
"fontFamily": "PT Serif",
"fontStyle": "italic",
"lineHeight": 1.16,
"textDecoration": "",
"textAlign": "center",
"textBackgroundColor": "",
"styles": {}
},
{
"type": "i-text",
"originX": "left",
"originY": "top",
"left": 47.08,
"top": 433.17,
"width": 107.83,
"height": 20.97,
"fill": "#000",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1.36,
"scaleY": 1.36,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"selectable": true,
"hasControls": true,
"hasBorders": true,
"id": "cellNumber",
"text": "C:888.888.8888",
"fontSize": "16",
"fontWeight": "normal",
"fontFamily": "PT Serif",
"fontStyle": "italic",
"lineHeight": 1.16,
"textDecoration": "",
"textAlign": "left",
"textBackgroundColor": "",
"styles": {}
},
{
"type": "i-text",
"originX": "right",
"originY": "top",
"left": 1044.34,
"top": 433,
"width": 153.52,
"height": 20.97,
"fill": "#000",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1.36,
"scaleY": 1.36,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"selectable": true,
"hasControls": true,
"hasBorders": true,
"id": "emailAddress",
"text": "youremail@email.com",
"fontSize": "16",
"fontWeight": "normal",
"fontFamily": "PT Serif",
"fontStyle": "italic",
"lineHeight": 1.16,
"textDecoration": "",
"textAlign": "right",
"textBackgroundColor": "",
"styles": {}
},
{
"type": "i-text",
"originX": "right",
"originY": "top",
"left": 1042.98,
"top": 472.44,
"width": 172.43,
"height": 20.97,
"fill": "#000",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1.36,
"scaleY": 1.36,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"selectable": true,
"hasControls": true,
"hasBorders": true,
"id": "webAddress",
"text": "www.websiteaddress.com",
"fontSize": "16",
"fontWeight": "normal",
"fontFamily": "PT Serif",
"fontStyle": "italic",
"lineHeight": 1.16,
"textDecoration": "",
"textAlign": "right",
"textBackgroundColor": "",
"styles": {}
},
{
"type": "image",
"originX": "left",
"originY": "top",
"left": 300,
"top": 130.27,
"width": 396,
"height": 413,
"fill": "rgb(0,0,0)",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 0.51,
"scaleY": 0.51,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"selectable": false,
"hasControls": false,
"hasBorders": false,
"src": "/images/stock/8ball.jpg",
"filters": [],
"crossOrigin": "",
"alignX": "none",
"alignY": "none",
"meetOrSlice": "meet"
}
],
"background": "",
"backgroundImage": {
"type": "image",
"originX": "left",
"originY": "top",
"left": 0,
"top": 0,
"width": 1088,
"height": 638,
"fill": "rgb(0,0,0)",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1,
"scaleY": 1,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"src": "/images/sample.jpg",
"filters": [],
"crossOrigin": "",
"alignX": "none",
"alignY": "none",
"meetOrSlice": "meet"
}
}
答案 0 :(得分：2)
如何加载你的json数据？
尝试：
canvas.loadFromJSON(json, canvas.renderAll.bind(canvas));
这对我有用。
加载图片时需要回调功能。
我的（煮沸）解决方案看起来像
// activepage contains the currently used canvas
this.clickOpenHandler = function(event) {
var file = event.target.files[0];
// file holds now an [file Object]
if (file) {
var reader = new FileReader();
reader.onload = function(e_onload) {
var content = e_onload.target.result;
// content holds now an [object File], like {"objects":[{"type":"rect","originX":"left", ...
activepage.canvas.loadFromJSON(content, function () {
activepage.canvas.renderAll.bind(activepage.canvas);
// Here the canvas already holds the read objects.
console.log(activepage.canvas.getObjects().length); // gives 2 in my testcase
activepage.canvas.renderAll();
$("#pty_open").val(null); // reset input element
});
}
reader.readAsText(file);
}
};
使用此HTML输入元素，您可以选择一个本地JSON文件，该文件会触发onchange事件：
<input id="pty_open" type="file" />
我希望这个例子可以帮助你。
PS：注意onchange事件。当文件名与最后一个文件名不同时，它仅触发。当您第二次选择相同的文件时，onchange不会触发，也不会发生任何事情。我使用 $（＆＃34;＃pty_open＆＃34;）。val（null）; 语句阻止了这一点。
答案 1 :(得分：0)
所以这个json数据中的某个东西会在它添加到画布时打破它然后保存这是添加的额外json数据。不知道可能导致它的原因。
{
"type": "image",
"originX": "left",
"originY": "top",
"left": 300,
"top": 130.27,
"width": 396,
"height": 413,
"fill": "rgb(0,0,0)",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 0.51,
"scaleY": 0.51,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"selectable": true,
"hasControls": true,
"hasBorders": true,
"src": "images/stock/8ball.jpg",
"filters": [],
"crossOrigin": "",
"alignX": "none",
"alignY": "none",
"meetOrSlice": "meet"
}
答案 2 :(得分：0)
对不起，我刚回来度假。我本来希望添加评论，而不是答案，但我的声誉点太少了。
返回主题： 我唯一能想到的是，图片在给定的源位置不存在（＆＃34; src＆＃34;：＆＃34; images / stock / 8ball.jpg＆＃34;）。