V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
freshgoose
V2EX  ›  分享发现

用 cursor 做网站是真的爽

  •  2
     
  •   freshgoose · 76 天前 · 2272 次点击
    这是一个创建于 76 天前的主题,其中的信息可能已经有所发展或是发生改变。

    比如说,我想要个 图片分割并 zip 下载 的功能,但是我又不懂 canvas 也不知道浏览器能不能直接打包 zip 。只要告诉它:

    生成一个 image splitter 组件,用户上传一张照片,选择行、列数量,点击按钮,就会自动分割,并打包成 zip 格式自动下载。
    

    就会生成一个功能完整的组件:

    'use client'
    import React, { useState } from 'react';
    import JSZip from 'jszip';
    import { saveAs } from 'file-saver';
    
    const ImageSplitter = () => {
        const [image, setImage] = useState<File | null>(null);
        const [rows, setRows] = useState(3);
        const [cols, setCols] = useState(3);
    
        const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
            if (e.target.files && e.target.files[0]) {
                setImage(e.target.files[0]);
            }
        };
    
        const handleSplitImage = async () => {
            if (!image) return;
    
            const img = new Image();
            img.src = URL.createObjectURL(image);
            img.onload = async () => {
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');
                if (!ctx) return;
    
                const zip = new JSZip();
                const { width, height } = img;
                const pieceWidth = width / cols;
                const pieceHeight = height / rows;
    
                for (let r = 0; r < rows; r++) {
                    for (let c = 0; c < cols; c++) {
                        canvas.width = pieceWidth;
                        canvas.height = pieceHeight;
                        ctx.drawImage(
                            img,
                            c * pieceWidth,
                            r * pieceHeight,
                            pieceWidth,
                            pieceHeight,
                            0,
                            0,
                            pieceWidth,
                            pieceHeight
                        );
    
                        const dataUrl = canvas.toDataURL('image/png');
                        const base64Data = dataUrl.split(',')[1];
                        zip.file(`piece_${r}_${c}.png`, base64Data, { base64: true });
                    }
                }
    
                const content = await zip.generateAsync({ type: 'blob' });
                saveAs(content, 'image_pieces.zip');
            };
        };
    
        return (
            <div className="flex flex-col items-center justify-center p-4">
                <div className="bg-white shadow-md rounded-lg p-6 w-full max-w-md">
                    <label className="block mb-2">
                        Upload an image:
                        <input
                            type="file"
                            accept="image/*"
                            onChange={handleImageUpload}
                            className="mb-4 w-full p-2 border border-gray-300 rounded"
                        />
                    </label>
                    <label className="block mb-2">
                        Enter number of rows:
                        <input
                            type="number"
                            value={rows}
                            onChange={(e) => setRows(parseInt(e.target.value))}
                            min="1"
                            className="mb-4 w-full p-2 border border-gray-300 rounded"
                        />
                    </label>
                    <label className="block mb-2">
                        Enter number of columns:
                        <input
                            type="number"
                            value={cols}
                            onChange={(e) => setCols(parseInt(e.target.value))}
                            min="1"
                            className="mb-4 w-full p-2 border border-gray-300 rounded"
                        />
                    </label>
                    <button
                        onClick={handleSplitImage}
                        className="w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-600 transition"
                    >
                        Split Image
                    </button>
                </div>
            </div>
        );
    };
    
    export default ImageSplitter;
    

    当然一开始样式有点丑,我补充了一句:使用 tailwind 优化一下样式,要现代感,柔色调

    大体效果就出来了: https://imagesplitter.org/

    6 条回复    2024-09-06 10:38:30 +08:00
    Sniper000
        1
    Sniper000  
       76 天前 via iPhone
    牛的
    MaxChan
        2
    MaxChan  
       76 天前
    https://websim.ai/ 试了一下,使用同样的两句话,效果也是很棒。



    可以点击下面链接来试玩一下,哈哈 https://websim.ai/c/6aPnf0S5RGnwciIoK
    codevvvv9
        3
    codevvvv9  
       75 天前
    做的好棒啊
    codevvvv9
        4
    codevvvv9  
       75 天前
    // 生成一个 image splitter 组件,用户上传一张照片,选择行、列数量,点击按钮,就会自动分割,并打包成 zip 格式自动下载。

    按上面这样操作的吗,然后直接生成代码啦?
    freshgoose
        5
    freshgoose  
    OP
       75 天前
    @codevvvv9 #4 差不多是的,直接生成了可运行的组件
    codevvvv9
        6
    codevvvv9  
       73 天前
    @freshgoose 那这也太强了吧
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5592 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 08:20 · PVG 16:20 · LAX 00:20 · JFK 03:20
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.