首页js canvas 给 canvas 截图完整代码

js canvas 给 canvas 截图完整代码

时间: 2024-10-14 12:01:02 浏览: 15

在JavaScript中，我们可以利用HTML5 Canvas API来截取Canvas的内容。以下是一个简单的完整代码示例，它创建了一个Canvas元素，绘制了一些内容，然后将其转换为Image对象并保存到本地： ```javascript <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas截图</title> </head> <body> <canvas id="myCanvas" width="500" height="500"></canvas> <script> // 创建画布和上下文 const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); // 绘制内容 ctx.fillStyle = 'blue'; ctx.fillRect(10, 10, 100, 100); ctx.strokeStyle = 'red'; ctx.strokeRect(200, 200, 100, 100); // 将canvas转换为image function canvasToImage(canvas) { return new Promise((resolve, reject) => { const imgData = canvas.toDataURL('image/png'); const newImg = document.createElement('img'); newImg.src = imgData; // 当图片加载完成时，将结果存储到变量中并结束Promise newImg.onload = function() { resolve(newImg); }; // 如果加载失败，拒绝Promise并报告错误 newImg.onerror = function() { reject('Failed to load image from canvas'); }; }); } // 获取canvas截图并下载 canvasToImage(canvas) .then(img => { const link = document.createElement('a'); link.href = img.src; link.download = 'canvas.png'; // 下载文件名 link.click(); }) .catch(err => console.error(err)); </script> </body> </html> ```

阅读全文