Power Platform Community Forum Thread Details

Dear all,

I have a custom code component, which can generate watermark for the image while user take phone using a camera control.

But there is a problem, a custom attribute is not automatically updated when taking photos,

the formula configuration of the custom attribute is as follows

originalDataUrl

Timestamp

Then I want to Know how to refresh Time stamp while user take phone by Camera1 control

Now, The control can get the latest picture from the camera, but the timestamp property cannot get the latest time.

My control code is as follows,

import { IInputs, IOutputs } from "./generated/ManifestTypes";

export class ImageWaterMark implements ComponentFramework.StandardControl<IInputs, IOutputs> {
 private _originalDataUrl: string; 
 private _resultDataUrl: string; // 
 private _waterMarkText: string; // 
 private _timeStampText: string; //
 private _notifyOutputChanged: () => void;
 private watermarkedImage: HTMLImageElement;
 private orginalImage: HTMLImageElement;
 private timeStampInput: HTMLInputElement; // 
 private _container: HTMLDivElement;
 private _context: ComponentFramework.Context<IInputs>;
 private _refreshData: EventListenerOrEventListenerObject;

 constructor() {

 }
 
 public watermarkImageWithText(originalImage: HTMLImageElement, watermarkText: string, timeStampText: string) {
 const canvas = document.createElement("canvas");
 const ctx = canvas.getContext("2d");
 const canvasWidth = originalImage.width;
 const canvasHeight = originalImage.height;
 canvas.width = canvasWidth;
 canvas.height = canvasHeight;
 if (ctx != null) {
 // initializing the canvas with the original image
 ctx.drawImage(originalImage, 0, 0, canvasWidth, canvasHeight);
 ctx.fillStyle = "black";
 ctx.textBaseline = "middle";
 ctx.textAlign = "right";
 ctx.font = "normal 10px arial";
 ctx.fillText(timeStampText, canvasWidth, canvasHeight - 10);
 ctx.fillText(watermarkText, canvasWidth, canvasHeight - 25);
 }
 return canvas.toDataURL();
 }
 
 public refreshData(evt: Event): void {
 console.log('refresh data invoked!');
 this._originalDataUrl = this.orginalImage.src as any as string;
 this._timeStampText = this.timeStampInput.value as any as string;

 if (this._waterMarkText != null && this._waterMarkText != '') {

 this._resultDataUrl = this.watermarkImageWithText(this.orginalImage, this._waterMarkText, this._timeStampText);
 
 this.watermarkedImage.src=this._resultDataUrl;
 
 this._notifyOutputChanged();
 }
 else {
 console.log('waterMarkText is empty!');

 } 
 }
 
 public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container: HTMLDivElement): void {
 console.log(`init context.parameters.WaterMarkText:${context.parameters.WaterMarkText}`);
 this._context = context;
 this._waterMarkText = context.parameters.WaterMarkText.raw!;
 this._timeStampText = context.parameters.TimeStampText.raw!;
 this._notifyOutputChanged = notifyOutputChanged;
 this._refreshData = this.refreshData.bind(this);

 this._container = document.createElement("div");
 this.watermarkedImage = document.createElement("img");
 this.watermarkedImage.setAttribute("id", "watermarkedImage");
 this.orginalImage = document.createElement("img");
 this.orginalImage.setAttribute("id", "originalImage");
 this.orginalImage.style.visibility = "hidden"; 
 this.orginalImage.onload =this._refreshData;

 this.timeStampInput = document.createElement("input");
 this.timeStampInput.setAttribute("type", "text");
 this.timeStampInput.onchange = this._refreshData;
 this.timeStampInput.setAttribute("value", this._timeStampText); 
 
 this._container.appendChild(this.timeStampInput);
 this._container.appendChild(this.watermarkedImage);
 this._container.appendChild(this.orginalImage);
 container.appendChild(this._container);
 } 
 public updateView(context: ComponentFramework.Context<IInputs>): void {
 console.log('update view');
 this._waterMarkText = context.parameters.WaterMarkText.raw!;

 if (this._timeStampText != context.parameters.TimeStampText.raw!) {
 this._timeStampText = context.parameters.TimeStampText.raw!;
 this.timeStampInput.setAttribute("value", this._timeStampText);
 (this.timeStampInput as any).onchange();
 }

 if (this.orginalImage.src != context.parameters.OriginalData.raw!) {
 this.orginalImage.src=context.parameters.OriginalData.raw!;
 }
 this._context = context;
 }
 
 public getOutputs(): IOutputs {
 return {
 WatermarkedData: this._resultDataUrl,
 };
 }
 
 public destroy(): void {
 // Add code to cleanup control if necessary
 this.orginalImage.removeEventListener("load", this._refreshData);
 this.timeStampInput.removeEventListener("change", this._refreshData);
 }
}

Would appreciate it if it could be solved.

Categories:

Power Apps Pro Dev & ISV