JavaScript实现点击直接下载Canvas绘制内容的相关问题咨询

实现Canvas绘图直接下载的修改方案 #

你可以直接替换原有的save函数为以下代码，即可实现点击按钮直接触发下载：

function save() {
    // 导出Canvas为PNG格式的DataURL，需要导出JPG可改为canvas.toDataURL('image/jpeg', 0.9)，0.9为画质参数
    var dataURL = canvas.toDataURL('image/png');
    // 创建临时触发下载用的a标签
    const downloadLink = document.createElement('a');
    // 你提到的href中x的位置，直接填入生成的DataURL即可
    downloadLink.href = dataURL;
    // download属性指定下载后的文件名，可自定义
    downloadLink.download = '我的绘图.png';
    // 临时将a标签插入页面，解决部分浏览器无法触发脱离DOM元素点击的问题
    document.body.appendChild(downloadLink);
    // 自动触发点击，直接启动下载
    downloadLink.click();
    // 下载完成后移除临时a标签，不影响页面结构
    document.body.removeChild(downloadLink);
}

之前下载错误的排查点 #

你之前出现下载整站的问题，大概率是以下两种原因：

• 没有正确将canvas.toDataURL()返回的base64地址赋值给a标签的href属性，导致href为空或默认指向当前页面地址
• 若你的保存按钮放在form表单内，点击会触发表单默认提交行为刷新页面，可在按钮点击调用函数时添加event.preventDefault()阻止默认行为即可
• 确保代码中canvas变量可以正确获取到你的画布DOM对象，避免toDataURL生成失败

内容的提问来源于stack exchange，提问作者Bobzilla07