I'm developing a webapp where the user will be able to configure a pool by dragging the various icon on a blueprint (stairs, skimmer, light...).
Once the configuration is done, the user can click on a button to receive the blueprint by email.
I did the function that take the screenshot and it works well, i did also the PHP function that send the mail (made with PHPmailer) and it work too.
My problem is that I can't find a way to attach the result of my screenshot which is stored in the JS variable "url" and gave to the html in the id "linkImg" :
function getPNG(){
html2canvas(document.querySelector("#plan")).then(canvas => {
document.getElementById("box1").appendChild(canvas)
var url = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
const linkImg = document.getElementById("linkImg");
linkImg.href=url;
linkImg.download="plan.png";
});
}Here the code of php part that i need to fill :
<?php
$mail->addAttachment();
?>I tried to give as argument : '$(#linkImg)' but without surprise it does not work.
I thank you by advance for any help. Have a good dayy
The image is in the browser, but your PHP code is on your server, so you have to pass the image data from the browser to the server. The best way to do that is with fetch. Here's an example showing how to send canvas data using fetch. On the server side, you will need to decode the data URL:
$img = $_POST['img'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
and then you will be able to add it to your email message directly, without going via a file, using addStringAttachment():
$mail->addStringAttachment($data, 'image.png');