How to Print dynamic text on an image and save that image(with text).

In my application I have a modal. On that modal there is a button to select image. User will select image. That image i have to show in a fixed size container on modal. Then user will write some text(or notes) in a textbox, which he wants to print on image and then clicks on image.

So that text will be printed at position where user has clicked.

Now I have to save this image with text written on it. So next time whenever I open this image it will show me image with text at same position.

My code is as follows

This is function to select image.

onSelectFile(event: any) {
if (event.target.files && event.target.files[0]) {
const reader = new FileReader();
// called once readAsDataURL is completed
reader.onload = (event: any) => {
this.url = event.target.result;
};
reader.readAsDataURL(event.target.files[0]); // read file as data url
}
}

This function is used to get x and y coordinated where user has clicked and then i have created element at runtime and I am assiging user entered text to this newly created label element.

getcoordinates(event) {
console.log(event.offsetX);
console.log(event.offsetY);
this.X = event.pageX - event.offsetX - 30;
this.Y = event.pageY - event.offsetY + 15;
const relativeX = (event.pageX);
const relativeY = (event.pageY);
const txt = document.createElement("LABEL");
txt.style.cssText = "position: fixed; color: red";
txt.setAttribute("id", "txtarea");
txt.innerHTML = this.itemToEditImage.Text;
txt.style.left = relativeX + 'px';
txt.style.top = relativeY + 'px';
txt.style.zIndex = "9000";
const parent = document.getElementsByClassName('container');
parent.item(0).appendChild(txt);
}

HTML code is

class="row">
class="col-md-5">
class="row">
class="col-md-3">
"file" (change)="onSelectFile($event)">

class="row">

class="col-md-1">

"text" id="TextData" name="TextData" [(ngModel)]="itemToEditImage.Text">

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

dip s6y ago
1. canvas.classList.add("show");
2. DrawOverlay(img);
3. DrawText();
4. DynamicText(img);
@farhan Ahmed Thank you. It's showing error at the line highlighted. Error is "Can not find name canvas".
I have declared canvas already. So if i write
this.canvas.classList.add("show");
Then it shows error "canvas does not exist on type filereader"
I am using type script. So i converted javascript code to typecript. How to deal this issue.
Thank you.
+1
Farhan Ahmed6y ago
https://codepen.io/ahebler/pen/KzyQBZ?__cf_chl_jschl_tk__=7c927f38a2134834aa83b86d50da351ccb9a0b39-1595009265-0-AXcIlUbRPKSSUy_D7-cXdMupw0sr1IPBnCi2UlaLZNEAlT_gzg2AGKWrK8DywzfFER73drrqPQCq0Iiv4dYEa-u74zi_wIeHpIEAxBJpMRQf4iRhIdXWPSUVinxS0TmbGByy_pJT3GWFN7Os92FoKYqkkNR7LRhTFVVh5oZcEPAsEzo50TbrT7NFZWZogpeZbumT7qO72OQWLmK6pMvrmz1WW1kpHZ8z1bGBjOn4hUfteTNMTB7y4gU1rpw_zkmOkZBq8XWPWXXCDk6ssNUcDm38-NBLIsd5Y1SXg-X5319HvUHMPtI7H7rmVeWw4fupjUHxJ4kezllQpSn_w5V1e6tg4eLdHhRA38zViifiyRdM

https://www.geeksforgeeks.org/how-to-create-an-image-element-dynamically-using-javascript/
0