javascript - 使用 fabric.js 在下部画布上添加多个图像

Question

我的目标是在 pdf 上动态添加交互式元素。

我正在尝试使用https://github.com/RavishaHesh/PDFJsAnnotations在画布上添加图像，

添加了一个带有http://fabricjs.com/interaction-with-objects-outside-canvas的工具。

fabric.Image.fromURL("http://localhost/img/test-image.png" , function(img) {

                fabricObj.add(img.set({
                    left: event.clientX - fabricObj.upperCanvasEl.getBoundingClientRect().left,
                    top: event.clientY - fabricObj.upperCanvasEl.getBoundingClientRect().top,
                    angle: 0,
                    opacity: 1
                }).scale(1));
                
                inst.active_tool = 0;
            });
        }

此代码正在工作并添加图像，但它正在用新图像替换包含 pdf 的画布。

我想添加多个图像而不会丢失包含我的 pdf-canvas 数据的画布。

我将尝试创建一个 jsfiddle 以使这个问题更容易理解，将编辑问题或在评论中添加它。

这是工作代码发送框：https ://codesandbox.io/s/hardcore-shape-gt8do

通过单击图像图标而不是画布上添加图像时，某些画布的背景正在删除。

标签： javascriptcanvasfabricjspdfjs