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();
  }
 }