I want to take a screenshot of the specific div and then send that file in the Api
the div is basically a check book design .The user fills the input field and the check design is selected dynamically . Now the Html2Canvas works fine it takes the screenshot of the all the input fields but the only problem i face is that it does not capture the background image.
here are the error it shows.
here is the html code
<div class="" id="check">
<div class="row">
<div class="col-lg-12 col-md-10 text-center">
<div class=" check mt-3"
[style]="'background-image: url(' + selectedCheckFrontBG + '); max-width:
1200px'">
<div class="container-fluid">
<div class="row pt-2 pb-2 first-row px-md-4">
<div class="col-md-4 col-5 payer-logo text-left">
<div *ngIf="slides && slides.length > 0">
<div *ngFor="let slide of slides">
<div class="mr-lg-5" contentEditable="true" [(ngModel)]="pincode">
{{slide.preferred_name_on_check}}</div>
<p class="m-0" contentEditable="true">{{slide.address_on_check}}
</p>
</div>
</div>
</div>
<div class="col-md-5 col-2 text-right">
</div>
<div class="col-md-3 col-5 text-right">
<div *ngIf="slides && slides.length > 0">
<div *ngFor="let slide of slides">
<h5 class="mr-lg-5" contentEditable="true" [(ngModel)]="pincode">
{{slide.bank_routing_number}}</h5>
</div>
</div>
<div class="date">
<input type="date" class="pay-data" [(ngModel)]="Date">
</div>
</div>
</div>
<div class="second-row pt-2 pb-1 px-md-2">
<div class="first-column">
<h6>PAY TO THE ORDER OF</h6>
</div>
<div class="second-column">
<input type="text" id="pay" name="pay" class="pay-data"
style="border-right: 1px solid black; height: calc(1em + .75rem +
2px);"
[(ngModel)]="payToOrder">
</div>
<div class="fourth-column ml-2">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">$</span>
</div>
<input type="number" id="amount" name="amount" class="form-control"
style="height: calc(1em + .75rem + 2px); outline: none"
(keyup)="convertAmountToWords($event)"
(change)="convertAmountToWords($event)"
step="0.01" [(ngModel)]="amount">
</div>
</div>
</div>
<div class="row py-md-1 px-md-3">
<div class="col-12 text-center">
<!-- <input type="text" name="numberInString"
[(ngModel)]="numberInStrings" id="numberInString"
class="pay-data" > -->
<div class="pay-data">{{numberInstring}}</div>
</div>
</div>
<div class="row pb-md-2 dollars px-md-3">
<div class="col-md-4 col-5 bank-logo">
<p class="m-0 p-0" style="font-size: 12px">Affinity Federal Credit
Union</p>
<p class="m-0 p-0" style="font-size: 12px">425 Any st.
Any city, US 45202</p>
</div>
<div class="col-md-4 col-4 text-right">
<h6>(Void After 90 Days)</h6>
</div>
<div class="col-md-4 col-3 text-right ">
<h4>DOLLARS <i class="fas fa-lock"></i></h4>
</div>
</div>
<div class="third-row px-md-2">
<div class="first-column text-center">
<h6 class="pt-3">MEMO</h6>
<div> <input type="text" id="memo" name="memo" class="pay-data"
[(ngModel)]="memo"></div>
</div>
<div class="second-column">
</div>
<div class="third-column">
<h6 class="pt-3">Signature</h6>
<input type="text" id="Signature" name="Signature" class="pay-data">
</div>
</div>
<div class="row">
<div class="col text-center ch-number badge check-number text-dark ">
<div *ngIf="slides && slides.length > 0">
<div *ngFor="let slide of slides">
<span>C</span>
<span>{{slide.bank_routing_number}}</span>
<span>C</span>
<span style="padding-left: 5px;">{{slide.current_check_number}}
</span>
<span>A</span>
<span style="padding-left: 5px;">{{slide.bank_account_number}}
</span>
<span>C</span>
<span>000</span>
<span>d</span>
</div>
</div>
<!-- c1001c a221283512a 56502052c -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and here is the typescript code
postData(imageFile ? : File, body ? : any, ) {
const url = 'https://staging.pay2mate.com/api/bank/create-echeck/';
const token = 'P2MToken 6ae2835d1351d4e71bb841e3888ae89f78d35925c9db26d932c47f11a298e067';
const formData = new FormData();
formData.append('front_image', imageFile, imageFile.name);
const headers = new HttpHeaders({
Authorization: token
});
Object.keys(body).forEach(key => {
formData.append(key, body[key]);
});
this.http.post(url, formData, {
headers
})
.subscribe(
response => {
console.log('Response:', response);
// Handle the response as needed
},
error => {
console.error('Error:', error);
// Handle the error as needed
}
);
}
captureScreenshot() {
console.log('Selected Id:', this.selectedId);
const element = document.getElementById('check');
html2canvas(element, {
useCORS: true
})
.then((canvas) => {
return new Promise((resolve) => {
canvas.toBlob(resolve, 'image/png');
});
})
.then((blob: Blob) => {
const file = new File([blob], 'screenshot.png', {
type: 'image/png'
}); // Create File object
console.log(file);
this.body = {
echeck_issued_amount: this.amount,
issuer_bank_account: this.selectedId,
echeck_issued_ts: this.Date,
beneficiary_name: this.payToOrder,
barcode_number: 'barcode_number',
echeck_pin_code: this.pincode,
digital_instrument_type: 'ECHECK',
receiver_bank_account: '',
notify_payee: this.isChecked,
email: this.email
};
this.postData(file, this.body);
})
.catch((error) => {
console.error('Error capturing screenshot:', error);
});
}
i am want the screenshot with the background but it is taking transparent screenshots.
