最近开发网站有一个需求,要求页面上有一块区域,用户能用鼠标在上面写字,并能保存成图片 base64 码放在服务器。 这样的需求用 canvas 实现是最好的。 需要用到 canvas 的以下几个属性:
除了用到这些属性外,还需要监听鼠标点击和鼠标移动事件。
我对代码做了扩展,除了支持画笔,还支持喷枪、刷子、橡皮擦功能。
将 canvas 转成图片,需要用到以下属性:
canvas.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型,默认为 PNG 格式。图片的分辨率为96dpi。
const image = new Image()
// canvas.toDataURL 返回的是一串Base64编码的URL
image.src = canvas.toDataURL("image/png")