将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();
}

where

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

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

Answer 1

假设 data = canvas.toDataURL("image/jpeg")，你可以用正确的headers指定一个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转PNG文件