<!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>CAD to Image 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 () {
const file = this.files[0];
if (!file) return; // Exit if no file is selected
const reader = new FileReader();
reader.onload = async function () {
try {
// Convert file to array buffer
const arrayBuffer = this.result;
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 cadImage = Aspose.CAD.Image.load(array);
console.log("CAD Image Loaded Successfully:", cadImage);
console.log("Converting CAD to Image...");
// Convert CAD to PNG
const exportedFilePromise = Aspose.CAD.Image.save(array, new Aspose.CAD.PngOptions());
exportedFilePromise.then(exportedFile => {
// Create image URL from the exported file
const blob = new Blob([exportedFile], { type: 'image/jpg' });
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("✅ Conversion Successful");
}).catch(error => {
console.error("❌ Error during conversion:", error);
});
} catch (error) {
console.error("❌ Error:", error);
}
};
reader.readAsArrayBuffer(file); // Read file as ArrayBuffer
});
};
</script>
</body>
</html>