When add Image as a Background its show white line in the right side in Fabric.js

The issue is when I add a background image with the below method, and then after Zoom Canvas there is an issue when the zoom ratio is odd, like 5%, 7%, 11%, etc.; it shows a white line at the end of the right side but does not show a white line when the canvas size is even. Why has this happened? I actually don't know



Backgroud Image Add Code

var left, top, scaleFactor;
await this.getMeta(this.props.canvasImage).then((results: any) => {
this.props.canvasImage = results.src;
if (results) {
var canvasAspect = this.zoomWidthRef / this.zoomHeightRef;
var imgAspect = results.width / results.height;
if (canvasAspect >= imgAspect) {
scaleFactor = this.zoomWidthRef / results.width;
left = 0;
top = -((results.height * scaleFactor) - this.zoomHeightRef) / 2;
} else {
scaleFactor = this.zoomHeightRef / results.height;
top = 0;
left = -((results.width * scaleFactor) - this.zoomWidthRef) / 2;
}
}
});
var option = {
top: top,
left: left,
scaleX: scaleFactor,
scaleY: scaleFactor,
crossOrigin: 'anonymous',
isFromServer: server_resource,
stockphotodetail: item,
uploadFrom: uploadSource,
scaleMode: 'Scale Crop'
}
this.setBackground(option);

setBackground(option) {
var self = this;
if (option) {

FabricImage.fromURL(this.props.canvasImage, { crossOrigin: 'anonymous' }, option).then((img) => {

const imgElement = img._originalElement as HTMLImageElement;

// Check if the loaded background image dimensions need to be scaled
if (img.height !== imgElement.naturalHeight) {
img.scaleY = img.height / imgElement.naturalHeight;
img.scaleX = img.width / imgElement.naturalWidth;
img.height = imgElement.naturalHeight;
img.width = imgElement.naturalWidth;
}

// Set the image as the background image
self.canvas.backgroundImage = img;
self.canvas.renderAll();

// Set the background color to transparent (or other canvas fill)
self.props.canvasFill = transparentColor;
self.canvas.backgroundColor = self.props.canvasFill;

// Additional operations
self.resetGradient();
self.canvas.remove(self.getElementById('pattern'));
self.canvas.renderAll();

// Other updates to canvas state
self.renderStackObjects('remove_bg');
self.canvasModified = true;
self._config.disableUndo = false;
self._config.disableRedo = false;
self.updateCanvasState();
})
.catch((error) => {
console.error('Error loading background image:', error);
});
// Flag to indicate background image is set
this.isBgImg = true;
}
}



Zoom Change With Mouse Wheel Event

document.addEventListener(
"wheel", function (e) {
if (that.p && that.p.isOpen()) {
that.popovers.forEach((popover: NgbPopover) => {
popover.close();
});
}

e.stopPropagation();
const targetElement = e.target;
if (targetElement.classList.contains('canvas-container2') || targetElement.classList.contains('upper-canvas')) {
if (((e.ctrlKey && !that.isCropingEnable) || (!e.ctrlKey && e.deltaY < 0 && e.deltaY && !Number.isInteger(e.deltaY) && window.innerWidth <= 1550 && !that.isCropingEnable))) {
e.preventDefault();
const { deltaY } = e;
let isTrackpad = false;
if (deltaY && !Number.isInteger(deltaY)) {
isTrackpad = true;
}
else {
isTrackpad = false;
}
var zoom = that.canvas.getZoom();
var delta = e.deltaY;
if (isTrackpad) zoom += e.deltaY * -0.01;
if (!isTrackpad) zoom *= 0.999 ** delta;
zoom > 3.00 ? zoom = 3.00 : '';
zoom < 0.10 ? zoom = 0.10 : '';
that.setZoomFromOption(Math.floor(zoom * 100));
}
}
},
{
passive: false
}

);



let zoomlevel = this.zoomLevel / 100;
this.canvas.setZoom(zoomlevel);
this.canvas.setDimensions({
width: Math.round(this.zoomWidthRef * zoomlevel),
height: Math.round(this.zoomHeightRef * zoomlevel)
})
this.canvas.calcOffset();

Continue reading...