function ImageUploadField({ onChange, accept, name, className }) { return /*#__PURE__*/ React.createElement("input", { type: "file", onChange: onChange, accept: accept, name: name, className: className, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function ImageUploadFieldStory() { const handleImageUpload = (event)=>{ const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onloadend = ()=>{ console.log(reader.result); }; reader.readAsDataURL(file); } }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ImageUploadField, { onChange: handleImageUpload, accept: "image/*", name: "imageUpload", className: "mb-4", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this })); } function MainComponent() { const [image, setImage] = useState(null); const [result, setResult] = useState(null); const [settings, setSettings] = useState({ furDensity: 0.5, furLength: 0.1, furIntensity: 0.5, stitchLength: 0.05, edgeIntensity: 0.7, colorCount: 8 }); const canvasRef = useRef(null); const resultCanvasRef = useRef(null); useEffect(()=>{ if (image) { convertToEmbroideryStyle(); } }, [ image, settings ]); const handleImageUpload = (event)=>{ const file = event.target.files[0]; const reader = new FileReader(); reader.onload = (e)=>setImage(e.target.result); reader.readAsDataURL(file); }; const convertToEmbroideryStyle = ()=>{ const canvas = canvasRef.current; const ctx = canvas.getContext('2d'); const resultCanvas = resultCanvasRef.current; const resultCtx = resultCanvas.getContext('2d'); const img = new Image(); img.onload = ()=>{ canvas.width = img.width; canvas.height = img.height; resultCanvas.width = img.width; resultCanvas.height = img.height; ctx.drawImage(img, 0, 0); const edges = detectEdges(ctx, canvas.width, canvas.height); const furTexture = generateFurTexture(canvas.width, canvas.height); const simplifiedColors = simplifyColors(ctx, canvas.width, canvas.height); combineEffects(resultCtx, simplifiedColors, furTexture, edges); setResult(resultCanvas.toDataURL()); }; img.src = image; }; const detectEdges = (ctx, width, height)=>{ const imageData = ctx.getImageData(0, 0, width, height); const data = imageData.data; const edgesData = new Uint8ClampedArray(data.length); for(let y = 1; y < height - 1; y++){ for(let x = 1; x < width - 1; x++){ const idx = (y * width + x) * 4; const gx = (-1 * data[idx - 4 - width * 4] + 1 * data[idx + 4 - width * 4] + -2 * data[idx - 4] + 2 * data[idx + 4] + -1 * data[idx - 4 + width * 4] + 1 * data[idx + 4 + width * 4]) / 8; const gy = (-1 * data[idx - 4 - width * 4] + 1 * data[idx - 4 + width * 4] + -2 * data[idx - width * 4] + 2 * data[idx + width * 4] + -1 * data[idx + 4 - width * 4] + 1 * data[idx + 4 + width * 4]) / 8; const magnitude = Math.sqrt(gx * gx + gy * gy); edgesData[idx] = edgesData[idx + 1] = edgesData[idx + 2] = magnitude; edgesData[idx + 3] = 255; } } return new ImageData(edgesData, width, height); }; const generateFurTexture = (width, height)=>{ const canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; const ctx = canvas.getContext('2d'); const imageData = ctx.createImageData(width, height); const data = imageData.data; for(let i = 0; i < data.length; i += 4){ const x = i / 4 % width; const y = Math.floor(i / 4 / width); const noise = Math.random() * settings.furIntensity; const fur = Math.sin(x * settings.furDensity) * Math.cos(y * settings.furDensity) * settings.furLength; data[i] = data[i + 1] = data[i + 2] = (noise + fur) * 255; data[i + 3] = 255; } ctx.putImageData(imageData, 0, 0); return canvas; }; const simplifyColors = (ctx, width, height)=>{ const imageData = ctx.getImageData(0, 0, width, height); const data = imageData.data; const numColors = settings.colorCount; const factor = 255 / (numColors - 1); for(let i = 0; i < data.length; i += 4){ data[i] = Math.round(data[i] / factor) * factor; data[i + 1] = Math.round(data[i + 1] / factor) * factor; data[i + 2] = Math.round(data[i + 2] / factor) * factor; } return imageData; }; const combineEffects = (ctx, simplifiedColors, furTexture, edges)=>{ ctx.putImageData(simplifiedColors, 0, 0); ctx.globalCompositeOperation = 'overlay'; ctx.drawImage(furTexture, 0, 0); ctx.globalCompositeOperation = 'multiply'; ctx.putImageData(edges, 0, 0); ctx.globalCompositeOperation = 'source-over'; }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 122, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 123, columnNumber: 7 }, __self: this }, "Embroidery Style Converter"), /*#__PURE__*/ React.createElement(ImageUploadField, { onChange: handleImageUpload, accept: "image/*", name: "imageUpload", className: "mb-4", __source: { fileName: "", lineNumber: 124, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-2", __source: { fileName: "", lineNumber: 125, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 px-2", __source: { fileName: "", lineNumber: 126, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 127, columnNumber: 11 }, __self: this }, "Settings"), Object.entries(settings).map(([key, value])=>{ const max = key === 'colorCount' ? 32 : 1; const step = key === 'colorCount' ? 1 : 0.01; const formattedValue = value.toFixed(2); return /*#__PURE__*/ React.createElement("div", { key: key, className: "mb-4", __source: { fileName: "", lineNumber: 133, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 134, columnNumber: 17 }, __self: this }, key), /*#__PURE__*/ React.createElement("input", { type: "range", min: 0, max: max, step: step, value: value, onChange: (e)=>setSettings({ ...settings, [key]: parseFloat(e.target.value) }), name: key, className: "w-full", __source: { fileName: "", lineNumber: 135, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 145, columnNumber: 17 }, __self: this }, formattedValue)); })), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 px-2", __source: { fileName: "", lineNumber: 150, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 151, columnNumber: 11 }, __self: this }, "Preview"), image && /*#__PURE__*/ React.createElement("img", { src: image, alt: "Original uploaded", className: "mb-4 max-w-full h-auto", __source: { fileName: "", lineNumber: 152, columnNumber: 21 }, __self: this }), result && /*#__PURE__*/ React.createElement("img", { src: result, alt: "Embroidery Style result", className: "max-w-full h-auto", __source: { fileName: "", lineNumber: 153, columnNumber: 22 }, __self: this }))), /*#__PURE__*/ React.createElement("canvas", { ref: canvasRef, style: { display: 'none' }, __source: { fileName: "", lineNumber: 156, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("canvas", { ref: resultCanvasRef, style: { display: 'none' }, __source: { fileName: "", lineNumber: 157, columnNumber: 7 }, __self: this })); }