Add imageFit to drawImage method (#332)

* Add imageFit to drawImage method * Add descriptions * Fix behavaior for apply image fit in draw image method --------- Co-authored-by: RomanTsukanov <[email protected]>
surveyjs · Sep 10, 2024 · db994d7 · db994d7
1 parent c0c113e
commit db994d7
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/src/doc_controller.ts b/src/doc_controller.ts
@@ -193,7 +193,15 @@ export interface IDocOptions {
     compress?: boolean;
 
     /**
-     * Specifies whether to apply the [`imageFit`](https://surveyjs.io/Documentation/Library?id=questionimagemodel#imageFit) property to exported [Image](https://surveyjs.io/Documentation/Library?id=questionimagemodel) questions.
+     * Specifies whether to apply `imageFit` settings specified in the survey JSON schema to exported images.
+     *
+     * Default value: `false`
+     *
+     * This property applies the following settings:
+     *
+     * - [`imageFit`](https://surveyjs.io/form-library/documentation/api-reference/add-image-to-survey#imageFit) to exported [Image](https://surveyjs.io/form-library/documentation/api-reference/add-image-to-survey) questions
+     * - [`imageFit`](https://surveyjs.io/form-library/documentation/api-reference/image-picker-question-model#imageFit) to exported [Image Picker](https://surveyjs.io/form-library/documentation/api-reference/image-picker-question-model) questions
+     * - [`logoFit`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#logoFit) to an exported logo in the survey header
      *
      * If you enable the `applyImageFit` property, the quality of images may be lower because they pass through several conversions. If `applyImageFit` is disabled, exported images fill the entire container and do not preserve their aspect ratio, but their quality remains the same because they are exported as is.
      */

diff --git a/src/event_handler/draw_canvas.ts b/src/event_handler/draw_canvas.ts
@@ -90,6 +90,14 @@ export interface IDrawImageOptions extends IDrawRectOptions {
      * A string value with a base64-encoded image to be drawn.
      */
     base64: string;
+    /**
+     * Specifies how to resize the image to fit it into its container.
+     *
+     * Default value: `"contain"` if [`applyImageFit`](https://surveyjs.io/pdf-generator/documentation/api-reference/idocoptions#applyImageFit) is enabled or `undefined` if not.
+     *
+     * Refer to the [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) CSS property description for information on accepted values.
+     */
+    imageFit?: string;
 }
 
 /**
@@ -245,10 +253,12 @@ export class DrawCanvas {
             height: imageOptions.height
         };
         const imageRect: IRect = this.alignRect(imageOptions, imageSize);
+        this.controller.pushMargins(0, 0);
         this.packs.push(await SurveyHelper.createImageFlat(
             SurveyHelper.createPoint(imageRect, true, true),
             null, this.controller, { link: imageOptions.base64,
                 width: imageRect.xRight - imageRect.xLeft,
-                height: imageRect.yBot - imageRect.yTop }));
+                height: imageRect.yBot - imageRect.yTop, objectFit: imageOptions.imageFit }, !!imageOptions.imageFit || this.controller.applyImageFit));
+        this.controller.popMargins();
     }
 }