Canvas Ignore Width and Height

[khaukheng]

I have set the options as follow

options = {
width: "600", // Width of canvas
height: "500", // Height of canvas
color:"red", // Color for shape and text
type : "rectangle", // default shape: can be "rectangle", "arrow" or "text"
images: ['/assets/images/mockImage.jpg'],
linewidth:2, // Line width for rectangle and arrow shapes
fontsize:"20px", // font size for text
bootstrap: true, // Bootstrap theme design
position: "top", // Position of toolbar (available only with bootstrap)
idAttribute: "id", // Attribute to select image id.
selectEvent: "change", // listened event to select image
unselectTool: false, // display an unselect tool for mobile
onExport: (image)=>{this.export(image)}
};

but the library just ignore my width and height and it will resize based on the image i put and it even goes beyond my screen when my picture is 1920*1080. Any help is much appreciated. Even the demo folder in this github does the same thing.

[brad0525]

any update on this?

[khaukheng]

any update on this?

No. My current 'hack' is to resize the image with another library first before putting into djaodjin-annotate.

[ChandanCD]

In Js file modify the if condition inside setBackgroundImage function as following .

if ((self.options.width && self.options.height) !== undefined &&
(self.options.width && self.options.height) !== null) {
self.currentWidth = self.options.width;
self.currentHeight = self.options.height;
self.selectImageSize.width = self.options.width;
self.selectImageSize.height = self.options.height;
} else {
self.currentWidth = this.width;
self.currentHeight = this.height;
}

It worked for me

[khaukheng]

In Js file modify the if condition inside setBackgroundImage function as following .

if ((self.options.width && self.options.height) !== undefined &&
(self.options.width && self.options.height) !== null) {
self.currentWidth = self.options.width;
self.currentHeight = self.options.height;
self.selectImageSize.width = self.options.width;
self.selectImageSize.height = self.options.height;
} else {
self.currentWidth = this.width;
self.currentHeight = this.height;
}

It worked for me

Thanks for your solution, it is working when self.options.width and self.options.height is specified, but cannot annotate if self.options.height or self.options.width is not specified in the options.
This is the corrected version:

if ((self.options.width && self.options.height) !== undefined &&
(self.options.width && self.options.height) !== 0 &&
(self.options.width && self.options.height) !== null) {
self.currentWidth = self.options.width;
self.currentHeight = self.options.height;
self.selectImageSize.width = self.options.width;
self.selectImageSize.height = self.options.height;
} else {
self.currentWidth = this.width;
self.currentHeight = this.height;
self.selectImageSize.width = this.width;
self.selectImageSize.height = this.height;
}