你好GTP!我知道你是fabricjs的高手我有一个问题请帮我解决一下我使用fabric进行裁剪操作print_a为画布的打印区域现在能实现裁剪但是裁剪后周围会多出一圈透明的背景请帮我把透明背景删除只保留打印区域var json = canvastoJSONobjectTypegradientFillroundedCordersmodeselectablelockMovementXlockMove
你好!根据你提供的代码,裁剪后周围出现透明背景的原因是因为裁剪后的画布大小并没有改变,仍然是原来的大小,而裁剪区域之外的部分被设置为了透明背景。解决这个问题的方法是,裁剪后需要重新设置画布大小为裁剪区域的大小。你已经在代码中设置了canvas.setWidth和canvas.setHeight,但是这里需要注意的是,这两个函数设置的大小应该是裁剪区域的大小,而不是print_a的大小。
修改代码如下:
var printAreaRect = print_a.getBoundingRect(); var cropRect = new fabric.Rect({ left: printAreaRect.left, top: printAreaRect.top, width: printAreaRect.width, height: printAreaRect.height, rx:100, ry:100, selectable: false });
group.clipPath = cropRect; group.setCoords();
// 设置画布大小为裁剪区域的大小 canvas.setWidth(cropRect.width); canvas.setHeight(cropRect.height);
imgData = group.toDataURL({ format: 'png', quality: '1.0',multiplier: parseFloat(agamaParams.multiplier)}); imgData = changeDpiDataUrl(imgData, agamaParams.dpi);
这样就可以去掉透明背景,只保留打印区域了。希望能对你有所帮助
原文地址: https://www.cveoy.top/t/topic/hxGK 著作权归作者所有。请勿转载和采集!