使用 canvas 实现手写绘图功能

之前做过一个手绘签名功能，当时用的是第三方插件。后来看了下 canvas 文档，感觉自己写也不是很难，因此本人自己也实现了一个，支持清空画布，保存为 DataUrl ，保存为 Blob ，以及下载到本地。由于实现撤销功能需要保存 imageData ，内存开销太大，暂时先不做了。

代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><canvas id="myCanvas" width="800" height="500" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas><div class="tool-bar"><button onclick="clearDrawer()">重画</button><button onclick="handleSaveDataUrl()">保存为DataUrl</button><button onclick="handleSaveBlob()">保存为Blob</button><button onclick="handleDownload()">保存到本地</button></div>
</body>
<script type="text/javascript">var x = 0;var y = 0;var c = document.getElementById("myCanvas");var cxt = c.getContext("2d");c.onmousedown = function (e) {x = e.clientX - 8;y = e.clientY - 8;c.onmousemove = function (e) {var newX = e.clientX - 8;var newY = e.clientY - 8;cxt.moveTo(x, y);cxt.lineTo(newX, newY);cxt.stroke();x = newX;y = newY;}}c.onmouseout = function (e) {// 鼠标移出绘图区域停止绘图c.onmousemove = null;}c.onmouseup = function (e) {// 鼠标按键松开停止绘图c.onmousemove = null;}function clearDrawer() {// 当 canvas 的高度或宽度被重设时，画布内容就会被清空c.height=c.height;}// 鉴于 imageData 的内存开销比较大，撤销功能先不做了// function savaPath() {//     imageData = cxt.getImageData(0,0,c.width,c.height);// }// function goBack() {//     if (!imageData) return//     cxt.putImageData(imageData,0,0);// }function handleSaveDataUrl() {console.log(c.toDataURL())// 调用接口将Base64字符串传给后台}function handleSaveBlob() {c.toBlob((blob) => {console.log(blob)// 调用接口将二进制文件流传给后台// 注意请求头的Content-type: application/octet-stream})}function handleDownload() {let time = new Date().getTime();c.toBlob((blob) => {let objectUrl = URL.createObjectURL(blob);let a = document.createElement('a');a.href = objectUrl;a.download = `测试下载-${time}.png`;document.body.appendChild(a);a.click();// URL.revokeObjectURL(objectUrl);a.remove();})}</script>
</html>

更多 API 参考：
HTML 5 Canvas 参考手册

使用 canvas 实现手写绘图功能相关推荐

用canvas实现手写签名功能
更多文章最近开发网站有一个需求,要求页面上有一块区域,用户能用鼠标在上面写字,并能保存成图片 base64 码放在服务器. 这样的需求用 canvas 实现是最好的. 需要用到 canvas 的以下 ...
uniapp使用canvas完成手写电子签名
uniapp使用canvas完成手写电子签名效果 <template><view ><canvas class="mycanvas" canvas- ...
android 手写签批_Android自定义实现手写签名功能
一.Android自定义View步骤 : 自定义属性: 选择和设置构造方法: 重写onMeasure()方法: 重写onDraw()方法: 重写onLayout()方法: 重写其他事件的方法(滑动监听 ...
android 电子签名手写签名功能实现
android 电子签名手写签名功能实现这个手写的效果就是一个重写的的自定义的view 代码如下: package com.example.hand.views;import java. ...
微信小程序Canvas实现手写签名
微信小程序Canvas实现手写签名功能描述点击按钮显示弹窗,弹窗主体为签名板,底部两个按钮为清除和保存. 清除按钮:清空签名板保存按钮:保存签名为图片,并关闭弹窗关键点分析 Canvas实现手 ...
vue+canvas实现手写签字画板
vue+canvas实现手写签字画板效果预览体验地址用途涂鸦画板签名板实现使用canvas,通过监听鼠标动作来进行绘图. 关键代码如下: drawing(event){if(!this ...
pc端签名 vue 生成图片_vue 使用 canvas 实现手写电子签名
功能兼容 PC 和 Mobile: 画布自适应屏幕大小变化(窗口缩放.屏幕旋转时画布无需重置,自动校正坐标偏移): 自定义画布尺寸(导出图尺寸),画笔粗细.颜色,画布背景色: 支持裁剪 (针对需求: ...
有道云笔记android手写,有道云笔记Android1.1.0发布：新增手写涂鸦功能
有道笔记是网易旗下有道搜索推出的笔记类知识管理软件,已于12月6日正式改名有道云笔记,同时发布了PC平台上的1.4版,并于12月8日发布了Android版有道云笔记1.1.0.新版有道云笔记(Andr ...
canvas实现手写签名
使用canvas实现手写签名,效果如下 PC端 // 实现canvas签名var canvas = document.getElementById('canvas');var ctx = canvas ...

使用 canvas 实现手写绘图功能

使用 canvas 实现手写绘图功能相关推荐

最新文章

热门文章