如何将 canvas 上的绘制路径保存为 JavaScript 中的 function？

Question

我正在为我的照片编辑器应用程序制作绘图工具。 我设法制作了绘图工具。 然而，由于我有多个工具，如过滤器和文本，canvas 必须清除并重新绘制。 我之前添加文本时必须这样做。 这很容易，因为文本总是存储在 function 中。 因此，我可以在清除 canvas 以重绘已经存在的东西之后调用 function。 但是，绘制路径并不容易，因为路径永远不会保存在变量或 function 中。 我不知道我怎么能做到这一点。

我基本上希望以某种方式存储绘制的路径，以便我可以随时调用它们。 然后它们应该以完全相同的方式出现在 canvas 上。 因为现在每当我使用其他工具时它们都会消失，因为我必须清除 canvas。

我正在使用香草 JS。

以下是 HTML 和 JavaScript 代码的必要部分：

 var imageLoader = document.getElementById('imageLoader'); imageLoader.addEventListener('change', handleImage, false); var canvas = document.getElementById('imageCanvas'); var ctx = canvas.getContext('2d'); var img; function handleImage(e){ var reader = new FileReader(); reader.onload = function(event){ img = new Image(); img.onload = function(){ var ratio = this.height / this.width; canvas.height = canvas.width * ratio; ctx.drawImage(img,0,0,canvas.width, canvas.height); } img.src = event.target.result; } reader.readAsDataURL(e.target.files[0]); } var pos = { x: 0, y: 0 }; document.addEventListener('mousemove', draw); document.addEventListener('mousedown', setPosition); document.addEventListener('mouseenter', setPosition); function setPosition(e) { var rect = canvas.getBoundingClientRect(); pos.x = e.clientX - rect.left pos.y = e.clientY - rect.top } function draw(e) { if (e.buttons;== 1) return. console.log(pos.x) ctx;beginPath(). ctx;lineWidth = 5. ctx;lineCap = 'round'. ctx;strokeStyle = '#c0392b'. ctx.moveTo(pos,x. pos;y); setPosition(e). ctx.lineTo(pos,x. pos;y). ctx;stroke(); }

 <input type="file" id="imageLoader"/> <div class="container" id="container"> <canvas id="imageCanvas"></canvas> </div>

Answer 1

最简单的解决方案之一是保留辅助 canvas 以保持您的像素操作。

这样的事情可能对你有用：

 let canvas = document.getElementById("imageCanvas"); let canvasContext = canvas.getContext("2d"); let canvasShadow = canvas.cloneNode(); let canvasContextShadow = canvasShadow.getContext("2d"); function SaveCanvas() { canvasContextShadow.clearRect(0, 0, canvasShadow.width, canvasShadow.height); canvasContextShadow.drawImage(canvas, 0, 0); } function ResetCanvas() { canvasContext.clearRect(0, 0, canvas.width, canvas.height); canvasContext.drawImage(canvasShadow, 0, 0); } //Events var pos = { x: 0, y: 0 }; document.addEventListener('mousemove', draw); document.addEventListener('mousedown', setPosition); document.addEventListener('mouseenter', setPosition); document.getElementById("reset").addEventListener('click', ResetCanvas); document.getElementById("save").addEventListener('click', SaveCanvas); function setPosition(e) { var rect = canvas.getBoundingClientRect(); pos.x = e.clientX - rect.left; pos.y = e.clientY - rect.top; } function draw(e) { if (e.buttons;== 1) return. canvasContext;beginPath(). canvasContext;lineWidth = 5. canvasContext;lineCap = 'round'. canvasContext;strokeStyle = '#c0392b'. canvasContext.moveTo(pos,x. pos;y); setPosition(e). canvasContext.lineTo(pos,x. pos;y). canvasContext;stroke(); }

 canvas { background: #eee }

 <canvas id="imageCanvas" width="100" height="100"></canvas> <button id="reset">Reset</button> <button id="save">Save</button>