Javascript fabric.js加载带有插入图像的json正在破坏画布
每当我将图像添加到fabric.js上的画布时，我都会在一个隐藏字段中将其保存并字符串化为JSON。从JSON数据加载的画布在console.log上有0个对象，而隐藏字段/变量中的JSON数据是不完整的。如果加载已字符串化的JSON数据，则插入的图像是JSON中唯一可以编辑的对象。我的程序通过添加文本、形状等保存到JSON，但当我添加图像时，就会发生这种情况 下面是我用来添加图像的代码Javascript fabric.js加载带有插入图像的json正在破坏画布,javascript,jquery,json,html5-canvas,fabricjs,Javascript,Jquery,Json,Html5 Canvas,Fabricjs,每当我将图像添加到fabric.js上的画布时，我都会在一个隐藏字段中将其保存并字符串化为JSON。从JSON数据加载的画布在console.log上有0个对象，而隐藏字段/变量中的JSON数据是不完整的。如果加载已字符串化的JSON数据，则插入的图像是JSON中唯一可以编辑的对象。我的程序通过添加文本、形状等保存到JSON，但当我添加图像时，就会发生这种情况 下面是我用来添加图像的代码 function insertImage(src){ fabric.Image.fromURL(sr
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);
});
$( "#testImage" ).click(function(){
var $additionalPropertiesData = canvas.toJSON(['selectable','lockmovementX', 'lockmovementY', 'hasControls', 'hasBorders', 'id']);
$( ".frontData" ).val(JSON.stringify($additionalPropertiesData));
var $frontPreviewData = $( ".frontData" ).val();
});
{
"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"
}
}
{
"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"
}
}
因此，当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"
}
如何加载json数据 尝试： 这对我有用 加载图像时需要回调函数 我的简化解决方案看起来像
// 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);
}
};
<input id="pty_open" type="file" />
PS：注意onchange事件。它仅在文件名与上一个文件名不同时触发。当您第二次选择同一个文件时，onchange不会触发，也不会发生任何事情。我用$pty_open.valnull阻止了这一点；声明。很抱歉回答晚了，我刚度假回来。我更愿意添加一条评论，而不是一个答案，但我的声誉点太少了 回到主题：
我能想象的唯一一件事是，图片不存在于给定的源位置src:images/stock/8ball.jpg。因此，在将json数据添加到画布并保存时，该json数据中的某些内容正在破坏它。这是添加的额外json数据。不确定是什么原因造成的。我试过你说的和用过的。loadFromJSON$frontPreviewData，frontCanvas.renderAll.bindfrontCanvas；那对我不起作用。下面是console.log显示的内容。画布前画布预览基本上不泄露我正在构建的内容，我有一个设计的预览图标，在对画布进行重大更改时加载画布数据，全尺寸画布。添加图像的画布很好，但我加载数据的画布显示0个对象。我在上面的答案中添加了我正在使用的完整解决方案，但仍然没有成功，我没有完全遵循您的答案。如果我从JSON数据中删除它，效果会很好，我不确定这个对象中有什么东西在破坏它，以及如何防止它以破坏它的方式被添加。
<input id="pty_open" type="file" />