将HTML5 canvas转换为图片链接

Question

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

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")

但我没有找到任何方法将 canvas 转换为可以与全球其他人分享的图像链接。 也许必须应用 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转PNG文件