保存网页中 canvas 的内容

在开发人员工具中，保存网页中 canvas 的内容，可以用这个方法：

方法1：

1. 在 dom 中创建一个下载按钮

<button id="save">保存</button>

2. 控制台中运行：

const gCanvas = document.querySelector('#page_1');

function onSave() {
  gCanvas.toBlob((blob) => {
    const timestamp = Date.now().toString();
    const a = document.createElement('a');
    document.body.append(a);
    a.download = `${timestamp}.png`;
    a.href = URL.createObjectURL(blob);
    a.click();
    a.remove();
  });
}
document.querySelector('#save').addEventListener('click', onSave);

3. 点击保存按钮即可下载

方法2：

方法2：
// 获取canvas元素
var canvas = document.getElementById('myCanvas');

// 获取canvas的绘图上下文
var ctx = canvas.getContext('2d');

// 绘制内容
//ctx.fillRect(0, 0, 100, 100);

// 将canvas内容转换为图片的base64编码
var dataURL = canvas.toDataURL('image/png');

// 创建img元素，用于预览图片
var img = document.createElement('img');
img.src = dataURL;
document.body.appendChild(img);

// 创建a元素，用于下载图片
var link = document.createElement('a');
link.href = dataURL;
link.download = 'myImage.png';

// 添加a元素到DOM中，并触发点击事件以下载图片
document.body.appendChild(link);
link.click();