Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 （附转换公式）

const fillImage = async () => { // 省略一万字... img.src = await getURLBase64(fillImageSrc) img.onload = () => { const imageData: ImageData = context.getImageData(0, 0, canvas.width, canvas.height) canvasHistroyListRef.current = [] canvasHistroyListRef.current.push(imageData) setCanvasCurrentHistory(1) } }

然后我们就实现一下，画笔更新时候，我们也需要将当前的状态添加入 画笔状态列表 ，并且更新当前状态对应的下标，还需要处理一下一些细节

总结一下：

鼠标抬起时，获取当前canvas画布状态

添加进状态列表中，并且更新状态下标

如果当前处于撤销状态，若使用画笔更新状态，则将当前的最为最新的状态，原先位置之后的状态全部清空

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!