function MainComponent() { const [previewImage, setPreviewImage] = React.useState(''); const [imageScale, setImageScale] = React.useState(1); const handleImageUpload = (event)=>{ const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onloadend = ()=>{ setPreviewImage(reader.result); }; reader.readAsDataURL(file); } }; const handleScaleChange = (event)=>{ setImageScale(event.target.value); }; const handleDownload = ()=>{ const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.width = 480; canvas.height = 272; ctx.fillStyle = 'white'; ctx.fillRect(0, 0, canvas.width, canvas.height); const image = new Image(); image.onload = ()=>{ const aspectRatio = image.width / image.height; let scaledWidth, scaledHeight; if (canvas.width / canvas.height < aspectRatio) { scaledWidth = canvas.width * imageScale; scaledHeight = scaledWidth / aspectRatio; } else { scaledHeight = canvas.height * imageScale; scaledWidth = scaledHeight * aspectRatio; } const x = (canvas.width - scaledWidth) / 2; const y = (canvas.height - scaledHeight) / 2; ctx.drawImage(image, x, y, scaledWidth, scaledHeight); const url = canvas.toDataURL('image/png'); const link = document.createElement('a'); link.download = 'download.png'; link.href = url; link.click(); }; image.src = previewImage; }; const previewStyle = { backgroundImage: `url(${previewImage})`, backgroundSize: `${imageScale * 100}%`, backgroundPosition: 'center', backgroundRepeat: 'no-repeat', width: '480px', height: '272px' }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 60, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold mb-4 text-center text-[#222] font-roboto", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, "MXCW Custom Home Screen"), /*#__PURE__*/ React.createElement("label", { className: "w-[480px] mb-4 bg-white border border-gray-300 p-2 text-center rounded shadow-md cursor-pointer", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, "Upload image", /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", name: "image-upload", onChange: handleImageUpload, className: "hidden", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4 border border-gray-300 rounded-lg shadow-md overflow-hidden", style: previewStyle, __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, !previewImage && /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-gray-400", __source: { fileName: "", lineNumber: 78, columnNumber: 27 }, __self: this }, "Image Preview")), /*#__PURE__*/ React.createElement("div", { className: "w-[480px] mb-4", __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "image-scale", className: "block font-roboto text-gray-800 mb-1", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, "Scale"), /*#__PURE__*/ React.createElement("input", { id: "image-scale", type: "range", name: "image-scale", min: "0.1", max: "2", step: "0.1", value: imageScale, onChange: handleScaleChange, className: "cursor-pointer", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleDownload, className: "w-[480px] font-roboto bg-gray-800 text-white py-2 px-4 rounded shadow-md hover:bg-gray-600 text-lg", __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this }, "Download")); }