<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CAD to Image Converter</title>
<script src="/node_modules/aspose-cad/dotnet.js"></script>
<script type="module" src="/node_modules/aspose-cad/es2015/index-js.js"></script>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
}
input, button {
margin-top: 15px;
}
img {
display: block;
margin-top: 20px;
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>DWF to PNG Converter</h2>
<input id="file" type="file" />
<img id="image" />
<br>
<button id="downloadBtn" style="display: none;">Download Image</button>
<script>
window.onload = function () {
// Get references to DOM elements
const fileInput = document.getElementById('file');
const downloadBtn = document.getElementById('downloadBtn');
const imageElement = document.getElementById('image');
// Listen for file selection
fileInput.addEventListener('change', async function (event) {
const file = event.target.files[0]; // Get selected file
if (!file) return; // Exit if no file is selected
try {
// Convert file to array buffer by calling the arrayBuffer function.
const arrayBuffer = await file.arrayBuffer();
const array = new Uint8Array(arrayBuffer);
console.log("Detecting file format...");
const fileFormat = Aspose.CAD.Image.getFileFormat(array);
console.log("File Format:", fileFormat);
console.log("Loading CAD file...");
const imgFile = await Aspose.CAD.Image.load(array);
console.log("CAD Image Loaded Successfully:", imgFile);
console.log("Converting CAD to Image...");
// Convert DWF to PNG by calling the Image.save method.
const exportedFile = await Aspose.CAD.Image.save(imgFile, new Aspose.CAD.PngOptions());
// Invoke the createObjectURL method to create image URL from the exported file.
const blob = new Blob([exportedFile], { type: 'application/octet-stream' });
const imageUrl = URL.createObjectURL(blob);
imageElement.src = imageUrl;
// Show download button
downloadBtn.style.display = "block";
downloadBtn.onclick = function () {
const a = document.createElement("a");
a.href = imageUrl;
a.download = "converted-image.png";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
};
console.log("✅ DWF to PNG Conversion Successful");
} catch (error) {
console.error("❌ Error:", error);
}
});
};
</script>
</body>
</html>