1
function saveImg() {
let out = [];
const imgData = canvas.toDataURL();
const fav = document.getElementById("favourites");
out.push(`<div>`);
out.push(`<img src= ${imgData} height = "200" alt = "image">`);
out.push(`<form action="/favorites" method="POST">`);
out.push(`<input type="hidden" value=${imgData} name="dataURL">`);
out.push(`<input type="hidden" value=${id++} name="_id">`);
out.push(`<input type="text" value="" name="name" id="name" readonly>`);
out.push(`<label for="name"></label>`);
out.push(`<br>`);
out.push(`<input type="submit" value="SUBMIT">`);
out.push(`</form>`);
out.push(`</div>`);
ctx.clearRect(0, 0, canvas.width, canvas.height);
history.clear();
fav.innerHTML += out.join("");
}
In this code one can press a button to save a drawing made on a canvas, and then give a name to the saved image, however, after writing the name I wanted to make the input become "readonly"
. What alternatives exist for this purpose?