将 HTML5 画布转换为图像链接

Question

嘿，所以我环顾四周，已经能够将我的画布转换为 dataURL 并使用此功能下载它：

function downloadImage(data, filename = 'untitled.jpeg') {
    var a = document.createElement('a');
    a.href = data;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
}

在哪里

data = canvas.toDataURL("image/jpeg")

但我没有找到任何方法将画布转换为可以与全球其他人共享的图像链接。也许必须应用 post 方法，它怎么可能？我也可以使用 node.js 在线服务器

Answer 1

假设data = canvas.toDataURL("image/jpeg")，您可以指定带有正确标头的base64链接：

const canvas = document.querySelector('canvas')
const button = document.querySelector('button')
const ctx = canvas.getContext('2d')

canvas.width = window.innerWidth
canvas.height = window.innerHeight

ctx.fillStyle = 'red'
ctx.fillRect(50, 50, 100, 100)

button.addEventListener('click', () => {
  let data = canvas.toDataURL("image/jpeg");
  data = data.replace('data:image/jpeg;base64,', '')
  console.log(data)
  downloadImage(data);
})

function downloadImage(data, filename = 'untitled.jpeg') {
    const a = document.createElement('a');
    a.href = 'data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=' + filename + ';base64,' + data;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
}

<button>Save</button>
<canvas></canvas>

来源：HTML5 Canvas to PNG File