gpt4 book ai didi

javascript - 将 JSON 保存为文件 + 从文件加载 JSON

转载 作者:行者123 更新时间:2023-12-01 02:14:14 27 4
gpt4 key购买 nike

我有一个 FabricJS Canvas (1.7.22),带有一些用于添加图像和文本的按钮。我还有一个 textarea,我可以用它来加载 Canvas JSON 以进行复制并加载到 Canvas 以供以后编辑。

我希望能够将 Canvas JSON 作为文件保存到我的计算机上,并能够稍后将该文件加载到 Canvas 上,从而加快该过程。

我觉得我拥有基本功能,但如何实现上述功能以获得更好的可用性?

$(function() {
var canvas = new fabric.Canvas('c', {
/* isDrawingMode: true */
});

$('#text').on('click', addtext);

function addtext() {
var text = new fabric.IText('Some Text!', {
left: 10,
top: 10
});
canvas.add(text);
}

// From Computer
document.getElementById('imgLoader').onchange = function handleImage(e) {
var reader = new FileReader();
reader.onload = function(event) {
console.log('fdsf');
var imgObj = new Image();
imgObj.src = event.target.result;
imgObj.onload = function() {
// start fabricJS stuff

var image = new fabric.Image(imgObj);
image.set({
left: 0,
top: 0,
angle: 20,
padding: 10,
cornersize: 10
});
//image.scale(getRandomNum(0.1, 0.25)).setCoords();
image.scale(0.2);
canvas.add(image);

// end fabricJS stuff
}

}
reader.readAsDataURL(e.target.files[0]);
}

// Add Web IMG
var myImg = 'https://i.imgur.com/q2oGjQ9.jpg';
$('#addImage').on('click', addImg);

function addImg() {
fabric.Image.fromURL(myImg, function(oImg) {
oImg.scale(0.2);
canvas.add(oImg);
});
}

// canvas2json
$("#canvas2json").click(function() {
var json = canvas.toJSON();
$("#myTextArea").text(JSON.stringify(json));
});

// load json2canvas
$("#loadJson2Canvas").click(function() {
canvas.loadFromJSON(
$("#myTextArea").val(),
canvas.renderAll.bind(canvas));
});
});
#myTextArea {
width: 90%;
height: 200px;
}

canvas {
border: 1px solid black
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<button id="text">Add Text</button>

<input type="button" id="addImage" value="Add Web IMG">
<input type="file" id="imgLoader">

<br/><br/>

<canvas id='c' width=500 height=500></canvas>

<br/>

<button id='canvas2json'>2JSON</button>
<button id='loadJson2Canvas'>2CANVAS</button>

<br/><br/>

<textarea id='myTextArea' onfocus="this.select();" onmouseup="return false;"></textarea>

最佳答案

使用 createObjectURL 下载 json,然后从浏览器上传并使用 readAsText 、 FileReader api 读取文件。然后将 JSON 加载到 Canvas 。

演示

$(function() {
var canvas = new fabric.Canvas('c', {
/* isDrawingMode: true */
});

$('#text').on('click', addtext);

function addtext() {
var text = new fabric.IText('Some Text!', {
left: 10,
top: 10
});
canvas.add(text);
}

// From Computer
document.getElementById('imgLoader').onchange = function handleImage(e) {
var reader = new FileReader();
reader.onload = function(event) {
console.log('fdsf');
var imgObj = new Image();
imgObj.src = event.target.result;
imgObj.onload = function() {
// start fabricJS stuff

var image = new fabric.Image(imgObj);
image.set({
left: 0,
top: 0,
angle: 20,
padding: 10,
cornersize: 10
});
//image.scale(getRandomNum(0.1, 0.25)).setCoords();
image.scale(0.2);
canvas.add(image);

// end fabricJS stuff
}

}
reader.readAsDataURL(e.target.files[0]);
}

// Add Web IMG
var myImg = 'https://i.imgur.com/q2oGjQ9.jpg';
$('#addImage').on('click', addImg);

function addImg() {
fabric.Image.fromURL(myImg, function(oImg) {
oImg.scale(0.2);
canvas.add(oImg);
});
}

// canvas2json
$("#canvas2json").click(function() {
var json = canvas.toJSON();
$("#myTextArea").text(JSON.stringify(json));
var a = document.createElement("a");
var file = new Blob([JSON.stringify(json)], {
type: 'text/plain'
});
a.href = URL.createObjectURL(file);
a.download = 'json.txt';
a.click();
});

// load json2canvas
$("#loadJson2Canvas").click(function() {
canvas.loadFromJSON(
$("#myTextArea").val(),
canvas.renderAll.bind(canvas));
});
$('#jsonload').change(function(e) {
var file = e.target.files[0];
if(!file) return;
var reader = new FileReader();
reader.onload = function(f) {
var data = f.target.result;
canvas.loadFromJSON(
JSON.parse(data),
canvas.renderAll.bind(canvas));
};
reader.readAsText(file);
});
$(this).val(null);
return;
});
#myTextArea {
width: 90%;
height: 200px;
}

canvas {
border: 1px solid black
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<button id="text">Add Text</button>

<input type="button" id="addImage" value="Add Web IMG"/><input type="file" id="imgLoader"/>
<br>upload json<input type="file" id="jsonload" />

<br/><br/>

<canvas id='c' width=500 height=500></canvas>

<br/>

<button id='canvas2json'>2JSON</button>
<button id='loadJson2Canvas'>2CANVAS</button>

<br/><br/>

<textarea id='myTextArea' onfocus="this.select();" onmouseup="return false;"></textarea>

关于javascript - 将 JSON 保存为文件 + 从文件加载 JSON,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49569218/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com