While sharing only image description is not coming, and when i share the URL to the image description is working. I want Image + description. I tried using blob too but there was no effect. On sharing the image as canvas also rendered same issue.
<?php
// Image URL
$imageUrl = "https://www.example.com/demo/vd/image.jpg";
$description = "This is an amazing image. Let me share it with you!";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Share Image and Copy Description</title>
<style>
.share-btn {
padding: 15px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
font-size: 18px;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>Share this Image with Description!</h1>
<img src="<?php echo $imageUrl; ?>" alt="Awesome Image" width="300" style="border-radius: 8px;">
<!-- Share Button -->
<button class="share-btn" id="shareBtn">Share Image and Copy Description</button>
<script>
async function shareImageAsCanvasAndCopyDescription(imageUrl, description) {
try {
// Create an image element to load the image
const image = new Image();
image.crossOrigin = "Anonymous";
image.src = imageUrl;
image.onload = async function() {
// Create a canvas to draw the image onto
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
// Set canvas dimensions based on image size
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image, 0, 0, image.width, image.height);
canvas.toBlob(async function(blob) {
if (!blob) {
console.error("Error creating image Blob");
return;
}
const imageFile = new File([blob], "image.jpg", { type: "image/jpeg" });
if (navigator.share) {
await navigator.share({
text: description,
files: [imageFile]
});
console.log("Shared successfully!");
await navigator.clipboard.writeText(description);
console.log("Description copied to clipboard!");
alert("Image shared and description copied to clipboard!");
} else {
alert("Web Share API is not supported on this browser.");
}
}, "image/jpeg");
};
} catch (error) {
console.error("Error sharing content:", error);
}
}
document.getElementById("shareBtn").addEventListener("click", function() {
const imageUrl = "<?php echo $imageUrl; ?>";
const description = "<?php echo $description; ?>";
shareImageAsCanvasAndCopyDescription(imageUrl, description);
});
</script>
</body>
</html>