像前端高手求救，寻求 canvas 编辑器，可以 画圈，画框，画线，录入文字

[daijinming]

像前端高手求救，寻求 canvas 编辑器，可以 画圈，画框，画线，录入文字，主要用于白板的录入

[Kaier]

https://github.com/Kaier33/easy-drawing-board

[daijinming]

@Kaier 感谢了朋友

[izoabr]

https://github.com/nhn/tui.image-editor

[YoRolling]

fabric.js.

[daijinming]

@izoabr 这个也不错

[daijinming]

@Kaier 朋友，位置有点不太准，还有能不能加个后退功能

[Kaier]

@daijinming 1. 位置不准? 请问你是用在线 demo 那个吗? 如果是. 请 clone 下项目, 用里面 example 里面的 html.
2. 有. undo

[Kaier]

@daijinming 你可以看下 example / index.html 的内容.
你说的后退应该就是 里面的 撤销功能. draw.undo()

[daijinming]

@Kaier 我自己整和的，canvas 我还有其他的用处，采用 pdf.js 加载 pdf， 然后用 easy-drawing-board 对 pdf 进行标记

[Kaier]

@daijinming 能否给个 demo 出来呢. 比如放到 codepen 之类的, 我喵一喵

[daijinming]

@Kaier https://github.com/daijinming/whiteboard-test.git 这个是我的测试项目，鼠标位置和绘制的位置上下有差别，要是有空给指导下，不急

[Kaier]

@daijinming 好的, 感谢反馈. 晚上回家后我去康康

[hahaayaoyaoyao]

@daijinming 有 canvas 库的，你可以去找找

我的这个就是用 p5 写的
https://www.ztftrue.com/public/html/audio.html

[hahaayaoyaoyao]

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API


Libraries 节点

[Kaier]

@daijinming 已修复, 请升级到 1.3.0 版本即可

[daijinming]

@Kaier 好的，收到

[daijinming]

@Kaier 朋友，我问下能不能把 canvas 设置成透明的，我考虑在 canvas 下面再放一个 canvas 用来渲染 pdf,我使用你那边组件提供的 undo 时，如果在公用 canvas 的时候，会将 渲染的 pdf 给抹掉

[Kaier]

@daijinming 我看了下你之前的提供的 demo. 觉得是不能共用一个 canvas 的.
我的做法是:
1. 创建一个 canvas 给 pdf 用, 它是绝对定位 -9999px 的, 屏幕上看不到. 作用只是为了拿到 pdf 生成后的 canvas 宽高和 渲染数据. 渲染数据用一个 变量存起来. (将 pdf 的数据转成 base64)
2. 创建的容器(也是画板插件真正要用的), 将 pdf 的数据渲染到这里面去.. 这样. 它的 橡皮擦功能 和 undo 功能就完全不受影响了.
我把示例代码提到你的 demo 的 issues 里面去了.你可以看下. 覆盖你之前的文件后跑一下.
如果你一定要共用一个 canvas 的话.. 那么很遗憾, 这个插件就帮不了你~

[daijinming]

@Kaier 示例我看到了，可以解决我的问题了，3q

[daijinming]

@Kaier 朋友，还有一个问题想和你探讨下，我考虑做个一个电子白板，将 canvas 上面的操作，记录起来，转成 base64 或是其他形式的字符串，发送给其他人，其他人也能在自己的 canvas 上恢复 canvas 上的操作，不知道可否指导一二

[Kaier]

@daijinming 有转 base64 的 api.

draw.generateBase64().then(data => console.log(data))

[daijinming]

@Kaier 那接收方恢复，怎么处理

[daijinming]

@Kaier 还有个事朋友，我看你发布的版本 还是有引用 core.js ,能不能打包成一个文件，我这边没法使用 npm 安装，都是手工在 html 加入引用