我想做到这一点，以便当我按下“保存”按钮时，文件资源管理器会打开并选择我选择保存画布 JSON 文件的位置。我还希望能够通过加载按钮加载带有 JSON 文件的画布。我该如何开始呢？任何帮助表示赞赏。
我希望这就是您想要实现的目标：
var canvas = document.querySelector('canvas')
var ctx = canvas.getContext('2d');
var reader = new FileReader();
// generates a random RGB color string
var randomColor = function () {
return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
}
// draw something on the canvas
ctx.fillStyle = randomColor();
ctx.fillRect(Math.random() * 100, 100, 100, Math.random() * 150);
ctx.fillStyle = randomColor();
ctx.fillRect(Math.random() * 200, Math.random() * 50, Math.random() * 150, 200);
// event handler for the save button
document.getElementById('save').addEventListener('click', function () {
// retrieve the canvas data
var canvasContents = canvas.toDataURL(); // a data URL of the current canvas image
var data = { image: canvasContents, date: Date.now() };
var string = JSON.stringify(data);
// create a blob object representing the data as a JSON string
var file = new Blob([string], {
type: 'application/json'
});
// trigger a click event on an <a> tag to open the file explorer
var a = document.createElement('a');
a.href = URL.createObjectURL(file);
a.download = 'data.json';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
});
// event handler for the load button
document.getElementById('load').addEventListener('change', function () {
if (this.files[0]) {
// read the contents of the first file in the <input type="file">
reader.readAsText(this.files[0]);
}
});
// this function executes when the contents of the file have been fetched
reader.onload = function () {
var data = JSON.parse(reader.result);
var image = new Image();
image.onload = function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(image, 0, 0); // draw the new image to the screen
}
image.src = data.image; // data.image contains the data URL
};
<canvas height="300" width="300"></canvas>
<div><button id="save">Save</button></div>
<div>Load: <input type="file" id="load"></div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
