javascript - 将画布(canvas)图像保存成本地图片的方法?

Question

我用裁剪工具裁出了一张图，它是经过toDataURL()转为的不是我想要的那种本地图片的，有图片名称的那种格式。

怎么可以存为本地图片呢？？？

Answer 1

0.鼠标右击直接保存....

1.说个html5的

<a href="data:image/png;base64,AAxx....base64..." download="vue-file-hahaha.png">Download</a>

download带上文件名就ok了,点击下载,在线演示
Base64直接下载,点击预览

2.方法二,ajax保存base64结果到服务器
来段php的

if(preg_match('/^(data:\s*image\/(\w+);base64,)/', $_POST['image'], $result)){
     $un_decode_base64 =  substr($content,strlen($result[1]));
     file_put_contents('filename.png', base64_decode($un_decode_base64));
     //后面输入路径,然后前端跳转下载服务器上的图片就可以了
}

Answer 2

toDataURL()参数指定格式类型啊

Answer 3

右键 ctrl+s就保存