在审核业务中难免会有需要对图片进行标注的需求，本次用一个最小demo来演示如何对图片进行矩形标注。首先我们要理解canvas是一块画布，而这块画布需要在我们要标注的图片上层，图片和canvas外层的div用相对位置，内层的图片和canvas用绝对位置，即可保证canvas重叠于图片之上。如图：我们来看下canvas的初始化，在img、canvas中都有ref属性，不同的是img的ref属性直接就是一个useRef引用，而canvas中的ref是一个回调函数。它在组件被加载或卸载时会立即执行，加载时ref回调接收当前组件实例作为参数，卸载时ref回调接收null作为参数。在initCanvas函数中，用canvas的ref引用承接了canvas节点，并且通过drawImage函数，初始化了一块*的画布，第一个参数为需要绘制到的上下文元素：
imgsrc={lan
转载请注明：http://www.aierlanlan.com/cyrz/348.html
