DEV Community: likun

在 Nextjs 中无缝集成 Cloudflare Turnstile

likun — Fri, 01 Nov 2024 13:38:41 +0000

还在为复杂的 CAPTCHA 验证困扰您的用户体验吗？Cloudflare Turnstile 为我们带来了一个优雅的解决方案。作为新一代的智能验证服务，它不仅能有效识别并拦截恶意机器人，更重要的是能让真实用户享受到丝滑般的网站体验。

为什么选择 Turnstile? 🚀 零感知验证 - 无需传统的图片识别验证码

🔒 强大的安全防护 - 智能识别并阻挡自动化攻击

🌐 通用性强 - 可在任何网站使用，不限于 Cloudflare 的站点

⚡ 性能出众 - 对网站性能影响微乎其微

这篇教程将带您一步步在 Next.js 项目中集成 Turnstile。虽然过程相对简单，但基于实践经验，我们会重点关注一些容易被忽视的技术细节，帮助您实现真正完美的集成。
这里的markdown排版不太好用，可以我的博客阅读体验会好一些

一.创建 Cloudflare 账户并配置 Turnstile 首先，您需要：

创建或登录 Cloudflare 账户--访问 Turnstile 控制面板--点击"添加小组件"创建新的验证组件

创建组件

在小部件设置中，添加您的域并选择“托管”模式，确保将其添加localhost到您的域以用于开发目的。

设置模式

二. 获取必要的密钥在创建验证组件后，您将获得两个重要的密钥：

Site Key: 用于客户端集成

Secret Key: 用于服务端验证

获取密钥

三. 项目结构设计在开始编码之前，让我们先了解一下完整的项目结构
带插入图片

四.初始化一个nextjs项目,并添加环境变量在开始集成 Turnstile 之前，我们需要先创建并配置一个 Next.js 项目。

创建 Next.js 项目
使用 create-next-app 创建项目

npx create-next-app@latest my-turnstile-app
 cd my-turnstile-app

添加env环境变量在env文件中添加刚才获取的key

NEXT_PUBLIC_TURNSTILE_SITE_KEY=your_site_key_here TURNSTILE_SECRET_KEY=your_secret_key_here
五.定义接口首先让我们定义一个接口组件，这个接口将作为我们的基础验证组件。它主要提供以下功能：

支持自定义验证栏的背景颜色（深色/浅色主题）提供多语言支持，方便国际化集成 Turnstile 的回调机制，处理验证结果

'use client';
import Script from 'next/script';
import { useCallback, useEffect, useRef } from 'react';

interface TurnstileWidgetProps {
  onVerify: (token: string) => void;
  theme?: 'light' | 'dark';
  language?: string;
}

const TurnstileWidget: React.FC<TurnstileWidgetProps> = ({
  onVerify,
  theme = 'dark',
  language = 'zh-CN'
}) => {
  const divRef = useRef<HTMLDivElement>(null);


  const renderWidget = useCallback(() => {
    if (divRef.current && window.turnstile) {
      window.turnstile.render(divRef.current, {
        sitekey: process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY as string,
        callback: onVerify,
        theme,
        language,
      });
    }
  }, [theme, language, onVerify]);
  useEffect(() => {

    // 只在 turnstile 可用时渲染
    if (window.turnstile) {
      renderWidget();
    }
    const currentRef = divRef.current;
    // 清理函数：组件卸载或依赖项改变时移除 widget
    return () => {
      if (currentRef) {
        window.turnstile?.remove(currentRef);
      }
    };
  }, [renderWidget, theme, language, onVerify]);

  return (<>
    <Script
      src="https://challenges.cloudflare.com/turnstile/v0/api.js"
      onLoad={
        renderWidget
      }
    />
    <div ref={divRef} />
  </>);
};

export default TurnstileWidget;

这个接口组件使用了 Next.js 的 Script 组件来按需加载 Turnstile 的脚本，这样可以优化页面加载性能。同时，我们还实现了完整的生命周期管理，确保组件在卸载时能够正确清理资源。

六.定义表单组件接下来，我们创建一个实际的表单组件来展示如何使用 Turnstile 验证。这个组件的主要特点包括：

集成了我们刚才创建的 Turnstile 接口组件实现了完整的表单状态管理提供了友好的加载和错误状态提示使用 TypeScript 确保类型安全

'use client';
import { useState, FormEvent } from 'react';
import TurnstileWidget from './TurnstileWidget';

interface FormData {
  email: string;
  password: string;
}

interface ApiResponse {
  message?: string;
  error?: string;
}
// 添加状态类型
type StatusType = 'success' | 'error' | '';

const ContactForm = () => {
  const [formData, setFormData] = useState<FormData>({
    email: '',
    password: '',
  });
  const [turnstileToken, setTurnstileToken] = useState<string>('');
  const [status, setStatus] = useState<{ type: StatusType; message: string }>({
    type: '',
    message: ''
  });
  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);

  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    if (!turnstileToken) {
      setStatus({ type: 'error', message: '请完成人机验证' });
      return;
    }

    setIsSubmitting(true);

    try {
      const response = await fetch('/api/contact', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          ...formData,
          turnstileToken,
        }),
      });

      const data: ApiResponse = await response.json();

      if (response.ok) {
        setStatus({ type: 'success', message: '提交成功！' });
        setFormData({ email: '', password: '' });
      } else {
        setStatus({ type: 'error', message: `错误: ${data.error || '未知错误'}` });
      }
    } catch (error) {
      setStatus({ type: 'error', message: '提交失败，请重试' });
      console.error('Form submission error:', error);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="mx-auto mt-16 max-w-xl sm:mt-20">
    <div className="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
      <div className="sm:col-span-2">
        <label htmlFor="email" className="block text-sm/6 font-semibold text-gray-900">
          邮箱
        </label>
        <div className="mt-2.5">
          <input
            type="email"
            id="email"
            value={formData.email}
            onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value }))}
            required
            className="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm/6"
          />
        </div>
      </div>
           <div className="sm:col-span-2">
        <label htmlFor="password" className="block text-sm/6 font-semibold text-gray-900">
          密码
        </label>
        <div className="mt-2.5">
          <input
            type="password"
            id="password"
            value={formData.password}
            onChange={(e) => setFormData(prev => ({ ...prev, password: e.target.value }))}
            required
            className="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm/6"
          />
        </div>
      </div>      


      <div className="sm:col-span-2">
        <TurnstileWidget
          onVerify={setTurnstileToken}
          theme="dark"
          language='en'
        />
      </div>

      {status.message && (
        <div className="sm:col-span-2">
          <p className={`text-sm ${status.type === 'error' ? 'text-red-600' : 'text-green-600'}`}>
            {status.message}
          </p>
        </div>
      )}
    </div>

    <div className="mt-10">
      <button
        type="submit"
        disabled={isSubmitting}
        className={`block w-full rounded-md px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm ${
          isSubmitting
            ? 'bg-indigo-400 cursor-not-allowed'
            : 'bg-indigo-600 hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
        }`}
      >
        {isSubmitting ? '提交中...' : '提交'}
      </button>
    </div>
  </form>


  );
};

export default ContactForm;

组件中包含了一些关键的状态处理,表单数据状态管理,验证token的存储和处理,提交状态的追踪,错误信息的展示

七.定义 API 路由
为了处理表单提交，我们需要创建一个后端 API 路由。这个路由主要负责：

接收前端提交的表单数据和验证token
与 Cloudflare 服务器通信验证 token 的有效性
处理验证结果并返回适当的响应
然后定义一个API 路由类型和实现

interface TurnstileVerificationResponse {
    success: boolean;
    error_codes?: string[];
    challenge_ts?: string;
    hostname?: string;
}

interface RequestBody extends FormData {
    turnstileToken: string;
}

export async function POST(request: Request) {
    try {
        const body: RequestBody = await request.json();
        const { turnstileToken, ...formData } = body;

        // 验证 Turnstile token
        const verificationResponse = await fetch(
            'https://challenges.cloudflare.com/turnstile/v0/siteverify',
            {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    secret: process.env.TURNSTILE_SECRET_KEY,
                    response: turnstileToken,
                }),
            }
        );

        const verificationData: TurnstileVerificationResponse = await verificationResponse.json();

        if (!verificationData.success) {
            console.error('Turnstile verification failed:', verificationData['error_codes']);
            return Response.json(
                { error: '验证码验证失败' },
                { status: 400 }
            );
        }

        // 验证通过，处理表单数据
        // 这里添加你的业务逻辑，比如发送邮件或保存到数据库
        console.log(formData)

        return Response.json({ message: '提交成功' });
    } catch (error) {
        console.error('API route error:', error);
        return Response.json(
            { error: '服务器错误' },
            { status: 500 }
        );
    }
}

在这个部分，我们重点关注了几个安全相关的问题：

确保所有请求都经过 Turnstile 验证,妥善处理验证失败的情况,提供清晰的错误信息.

八.创建测试页面
最后，我们创建一个测试页面来集成所有组件。

import ContactForm from "../components/ContactForm";

export default function ContactPage() {
  return (
    <div className="container mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">联系我们</h1>
      <ContactForm />
    </div>
  );
}

九.本地运行测试

结语
原文通过这个教程，我们不仅完成了 Turnstile 的基础集成，更重要的是掌握了一些实用的开发技巧。希望这些内容能帮助您在项目中构建更安全、更友好的用户验证机制。在实际部署时候，需要注意确保环境变量正确配置,检查域名设置是否包含了所有需要的域名. 如果您在集成过程中遇到任何问题，欢迎在评论区留言讨论。

supabase注册并创建项目和添加数据表

likun — Thu, 24 Oct 2024 03:55:24 +0000

Supabase 是一个开源的后端即服务（BaaS）平台，它使开发者可以快速搭建后端，无需繁琐的配置,让你在几分钟的时间内创建一个实时后台。Supabase 会根据数据库模式自动生成 API，支持 SQL 查询，并具备实时数据同步能力。此外，它还支持行级安全性（Row-Level Security），确保数据的访问控制安全。

Supabase 是 Firebase 的一个强大替代方案，常与 React、Next.js 等前端框架搭配使用，适合快速构建现代应用。
supabase提供几种套餐选择，对于个人开发者或者学习者，免费计划就足够了。

)

一、supabase 注册

supabase 注册非常简单，直接使用github登陆就可以，不需要电话或者短信验证。

二、创建项目

在注册账号的的时候，supabase会引导你创建一个新的组织和项目。然后登陆到你的后台会看到类似的界面。

或者你也可以新创建一个组织和项目。

三、创建新的组织

创建新组织需要人机验证

验证通过后,进入创建组织页面。

添加你的组织名称，选择你的组织类型，然后选择免费套餐。点击创建。

四、创建新的项目

然后回到仪表盘，点击创建项目，选择你新创建的组织，对于免费套餐，支持最多创建两个项目。

选择你的组织，添加用户名，密码，选择地区，supabase在中国没有服务器，你可以选择亚太地区的新加坡，首尔或者东京等地址。你的项目将需要大约几分钟的时间来创建。

五、添加数据表和数据

在supbase的后台中，你可以选择图形化界面添加表和数据，也可以使用sql语句添加表和数据。

使用图形化界面添加表和数据

使用sql语言添加数据表

创建表并添加数据后，你可以在右侧打开api docs，这里会显示很多api参考，可以直接复制到你的项目中使用。

这样我们就完成了注册supabase并创建数据表的流程。
博客原文地址：https://blog.eimoon.com/p/supabse%E6%B3%A8%E5%86%8C%E5%B9%B6%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE%E5%92%8C%E6%B7%BB%E5%8A%A0%E6%95%B0%E6%8D%AE%E8%A1%A8/

Nextjs中使用axios实现一个动态的下载/上传进度条

likun — Mon, 19 Aug 2024 05:56:08 +0000

在现代的Web开发中，处理文件上传/下载和表单提交是常见的需求，尤其是在构建富交互的用户界面时。无论是上传图片、文档还是其他类型的文件，都需要确保用户体验的流畅性和数据的安全性。这篇文章将带您深入了解如何在Next.js应用中处理文件上传/下载，展示上传/下载进度，并使用React的热门工具集来简化这一过程。我们将结合 Next.js 强大的全栈功能和 Tailwind CSS 的快速样式设置，来构建一个美观且高效的文件上传界面。通过使用 Axios 进行HTTP请求，您将学会如何将文件数据发送到服务器，并在上传/下载过程中显示实时的进度条，以提高用户反馈的即时性。

无论您是初学者还是有经验的开发者，这篇文章都将为您提供实用的示例和详细的解释，帮助您掌握在现代Web开发中处理文件上传的最佳实践。让我们开始吧！

一.创建一个nextjs程序

首先创建一个nextjs程序，命名为progress-bar

 npx create-next-app@latest progress-bar

在接下来的询问环节中, 选项全部选择默认:

✔ Would you like to use ESLint? … **No** / Yes
✔ Would you like to use Tailwind CSS? … No / **Yes**
✔ Would you like to use `src/` directory? … No / **Yes**
✔ Would you like to use App Router? (recommended) … No / **Yes**
✔ Would you like to customize the default import alias? … **No** / Yes

安装完成进入项目目录,运行

npm run dev

然后打开http://localhost:3000应该能看到nextjs的默认页面。

二.安装必要的包

让我们先从下载进度条开始，要使用上传/下载状态条，可以使用axios的配置选项onDownloadProgress/onUploadProgress,因此安装axios,同时安装@tanstack/react-query,来更好的管理请求状态。你也可以使用你喜欢的yarn pnpm等工具。

npm install axios @tanstack/react-query

三、创建一个前端页面download

首先创建一个页面,app/download/page.tsx,里面简单的添加一些样式。

    <div className="bg-white">
            <header className="absolute inset-x-0 top-0 z-50">
                <nav aria-label="Global" className="flex items-center justify-between p-6 lg:px-8">
                    <div className="flex lg:flex-1">
                        <a href="#" className="-m-1.5 p-1.5">
                            <span className="sr-only">公司名称</span>
                            <Image
                                width={200}
                                height={200}
                                alt="logo"
                                src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
                                className="h-8 w-auto"
                            />
                        </a>
                    </div>
                    <div className="flex lg:hidden">
                        <button
                            type="button"
                            onClick={() => (true)}
                            className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
                        >
                            <span className="sr-only">Open main menu</span>
                        </button>
                    </div>
                    <div className="hidden lg:flex lg:gap-x-12">
                        {navigation.map((item) => (
                            <a key={item.name} href={item.href} className="text-sm font-semibold leading-6 text-gray-900">
                                {item.name}
                            </a>
                        ))}
                    </div>
                    <div className="hidden lg:flex lg:flex-1 lg:justify-end">
                        <a href="#" className="text-sm font-semibold leading-6 text-gray-900">
                            Log in <span aria-hidden="true">&rarr;</span>
                        </a>
                    </div>
                </nav>
            </header>
            <div className="relative isolate px-6 pt-14 lg:px-8">
                <div
                    aria-hidden="true"
                    className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
                >
                    <div
                        style={{
                            clipPath:
                                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
                        }}
                        className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
                    />
                </div>
                <div className="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">

                    <div className="text-center">
                        <h1 className="text-2xl font-bold tracking-tight text-gray-900 sm:text-5xl">
                            Nextjs 实现下载进度条
                        </h1>
                        <p className="mt-6 text-lg leading-8 text-gray-600">
                        @longlikun 
                        </p>
                        <div className="mt-10 flex items-center justify-center gap-x-6">
                            <button
                                type='submit'

                                className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-lg font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
                            >
                                立即下载
                            </button>
                        </div>             
                    </div>
                </div>
                <div
                    aria-hidden="true"
                    className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
                >
                    <div
                        style={{
                            clipPath:
                                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
                        }}
                        className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
                    />
                </div>
            </div>
        </div>

因为在样式中使用了一张远程图片,我们还需要配置一下远程域名。我们在下一步完成。

四、配置nextjs图片的安全域名

为了保护应用程序免受恶意用户的攻击，nextjs需要进行配置才能使用外部图像。因为这里使用了tailwindui.com 的一个远程图片，另外使用的图片格式是svg,所以也一起配置，在next.config.mjs 文件中添加如下内容:

module.exports = {
    images: {
            dangerouslyAllowSVG: true,
            remotePatterns: [
            {
                protocol: 'https',
                hostname: 'tailwindui.com',        
            },
            ]
        }
}

完成后打开http://localhost:3000/download,页面，应该看到如下页面：

四、添加一个进度条样式

在页面中添加一个进度条,样式可以从我的这篇文章中找一下,我这里就选择一个最基本的样式，添加到download 页面：

...
<div className="mx-5 my-10 h-4 rounded-full bg-gray-200">
    <div className="h-4 rounded-full bg-green-500 w-1/2" ></div>
</div>
...

完成后页面如下：

四、添加环境变量

我在本地使用golang 构建了一个从阿里云oss下载/上传图片的端口,你可以使用自己的端口或者 httpbin 等类似公共api，在根目录创建一个env文件,添加下面的内容：

// 添加端口域名
NEXT_PUBLIC_API_URL=http://localhost:8080/api

五、配置react-query

react-query的配置可以参考这篇文章,这里我不详细介绍了。
创建一个文件 app/provider/ReactQueryProvider.tsx,添加下面内容:

'use client'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { useState } from 'react'

export const ReactQueryClientProvider = ({ children }: { children: React.ReactNode }) => {
  const [queryClient] = useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            // With SSR, we usually want to set some default staleTime
            // above 0 to avoid refetching immediately on the client
            staleTime: 60 * 1000,
          },
        },
      })
  )
  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
}

然后在layout.tsx文件添加ReactQueryProvider,包裹子组件。

import ReactQueryProvider from "@/app/providder/ReactQueryProvider";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <ReactQueryProvider>
          {children}
        </ReactQueryProvider>
        </body>
    </html>
  );
}

六、使用 usestate管理进度和进度条的开启状态

定义两个变量来分别管理下载进度的百分比和进度条的开启和关闭状态。

const [downloadProgress, setDownloadProgress] = useState<number>(0); //下载进度
const [showDownloadProgress, setShowDownloadProgress] = useState<boolean>(false); //是否显示下载进度条

六、配置请求函数

我的接口使用的是POST,因此需要使用react-query的useMutation,添加请求代码如下:

    const mutation = useMutation({
        mutationFn: async () => {
            const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL;
            const url = `${API_BASE_URL}/download`;
            const response = await axios.post(
                url,
                // 直接指定数据
                {
                    path: "path/", //eg:path/
                    filename: "kongzi", //eg:abc
                    format: "png", //eg:jpg
                },
                {
                    responseType: 'blob',
                    onDownloadProgress: (progressEvent) => {
                        const total = progressEvent.total;               
                        percentage = Math.round((progressEvent.loaded * 100) / total);
                        // 设置下载进度的值,已经转换为百分比
                        setDownloadProgress(percentage);
                    },
                }
            );

            if (response.status === 200) {
                const url = window.URL.createObjectURL(response.data);
                const link = document.createElement('a');
                link.href = url;
                link.download = "kongzi" + "." + "png"; // 拼接文件全名
                link.click();
                window.URL.revokeObjectURL(url);
            }
        },
        onMutate: () => {
        },

        onSuccess: () => {
        },
        onError: () => {
        },

    });

我的端口需要使用path,filename和format 几个参数,为了不涉及过多无关的请求,这里直接硬编码为指定参数。我们只关注onDownloadProgress 这个配置。解释一下:

progressEvent: 这是下载进度事件对象，包含有关下载的数据。
const total = progressEvent.total: 从事件对象中获取文件的总大小（字节数）。
progressEvent.loaded: 表示当前已下载的字节数。
percentage = Math.round((progressEvent.loaded * 100) / total): 计算已下载部分的百分比，并使用 Math.round 四舍五入。

我们获取到percentage 这个值就可以了.

七、添加点击函数

添加一个点击函数,然后给button绑定这个函数。

    const handleDownload = () => {
        console.log("handle download")
        setShowDownloadProgress(true)
        // mutation.mutate()
    }

在这个函数中我们暂时先注释掉 mutation.mutate()，不触发实际请求,先测试是否能正确显示下载进度条。
给下载按钮绑定handleDownload函数。

<button
    type='submit'
    onClick={handleDownload}
    className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-lg font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
>
    立即下载
</button>

测试一下,当点击下载按钮后,会显示一个进度50%的静态下载进度条。

打开 // mutation.mutate() 这段注释, 实际测试一下。
可以看到点击下载后会显示进度条，然后完成下载。

我们还没有完成,这里的进度条还是固定没有变化的,我们还需要实现: 1.进度条动态显示。2.当下载完成后，关闭进度条。让我们继续吧。

七、动态修改div样式

想要实现进度条的动态变化,我这里直接动态修改div的宽度,把downloadProgress的值传递给width,这个值已经被我们处理成百分比格式的了。

{showDownloadProgress && (
<div className="mx-5 my-10 h-4 rounded-full bg-gray-200">
    <div className="h-4 rounded-full bg-green-500 w-1/2"  style={{ width: `${downloadProgress}%` }} ></div>
</div>

)}

然后设置当下载完成后关闭进度条,在onSettled设置进度条的状态为false,这样不管成功还是失败都会关闭进度条。

    onSettled: () => {
        setShowDownloadProgress(false)
    },

完成以后测试一下。可以看到当点击下载按钮后,显示进度条,进度条绿色不断增长直到100%,然后进度条消失。
视频:

八、优化进度条样式

进度条内容显示样式稍微有点简单,优化一下样式，添加一下文字提示

<div className="mx-5 my-10 h-4 rounded-full bg-gray-200 ">
    <div className="h-4 rounded-full bg-green-500 w-1/2" style={{ width: `${downloadProgress}%` }} ></div>
    // 添加下面的样式
    <div className="mt-4 flex items-center justify-between text-sm">
        <div className="text-gray-600">下载进度</div>
        <div className="text-gray-600">{downloadProgress}%</div>
    </div>
</div>

完成如下所示,因为使用的国外的oss,所以响应会慢一些：
视频

九、提取下载进度条到一个单独的组件

提取进度条到一个单独的文件,方便一会上传复用。新建文件/app/components/ProgressBar.tsx,添加下面内容。

import React from 'react'

interface ProgressProps {
    progress: number
}
const ProgressBar: React.FC<ProgressProps> = ({
    progress
}) => {
    return (
        <div className="mx-5 my-10 h-4 rounded-full bg-gray-200 ">
            <div className="h-4 rounded-full bg-green-500 w-1/2" style={{ width: `${progress}%` }} ></div>
            <div className="mt-4 flex items-center justify-between text-sm">
                <div className="text-gray-600">下载进度</div>
                <div className="text-gray-600">{progress}%</div>
            </div>
        </div>
    )
}

export default ProgressBar

修改upload/page.tsx文件

import ProgressBar from '@/app/components/ProgressBar'

{showDownloadProgress && (        
    <ProgressBar progress={downloadProgress}></ProgressBar>

)}

测试一下，一切正常。

十、处理成功和错误提示

处理成功或者错误最好是给一个提示框，这里使用headlessui 的 Dialog
,首先安装一下headlessui

npm install @headlessui/react@latest

这里我只是简单的文字提示下载成功或错误,实际项目可能会需要根据错误不同给出不同的提示。
创建一个文件/app/components/ShowDialog.tsx

import React from 'react';

import { Button, Dialog, DialogPanel, DialogTitle } from '@headlessui/react';
import { useState } from 'react';

interface ShowDialog {
  isSuccess: boolean; 
}

const ShowDialog: React.FC<ShowDialog> = ({ isSuccess }) => {
  let [isOpen, setIsOpen] = useState(true);

  function close() {
    setIsOpen(false);
  }

  return (
    <Dialog
      open={isOpen}
      as='div'
      className='relative z-10 focus:outline-none'
      onClose={close}
    >
      <div className='fixed inset-0 z-10 w-screen overflow-y-auto'>
        <div className='flex min-h-full items-center justify-center p-4'>
          {isSuccess ? (
            <DialogPanel
              transition
              className='w-full h-52 max-w-lg rounded-xl bg-white/5 p-6 backdrop-blur-2xl duration-300 ease-out data-[closed]:transform-[scale(95%)] data-[closed]:opacity-0'
            >
              <DialogTitle
                as='h3'
                className='text-base/7 font-medium text-black'
              >
                下载成功
              </DialogTitle>
              <p className='mt-2 text-sm/6 text-black/50'> 文件已成功下载。您可以现在查看或打开文件。如果您需要进一步操作，请根据提示进行。感谢您的耐心等待！</p>
              <div className='mt-4 '>
                <Button
                  className='inline-flex text-center items-center gap-2 rounded-md bg-green-500 py-1.5 px-3 text-sm/6 font-semibold text-white shadow-inner shadow-white/10 focus:outline-none data-[hover]:bg-gray-600 data-[focus]:outline-1 data-[focus]:outline-white data-[open]:bg-gray-700'
                  onClick={close}
                >
                 下载成功
                </Button>
              </div>
            </DialogPanel>
          ) : (
            <DialogPanel
              transition
              className='w-full h-52 max-w-lg rounded-xl bg-white/5 p-6 backdrop-blur-2xl duration-300 ease-out data-[closed]:transform-[scale(95%)] data-[closed]:opacity-0'
            >
              <DialogTitle
                as='h3'
                className='text-base/7 font-medium text-black'
              >
                下载失败
              </DialogTitle>
              <p className='mt-2 text-sm/6 text-black/50'>
                文件下载失败，可能是由于网络连接不稳定或服务器问题导致。请检查您的网络连接并稍后重试。如果问题仍然存在，请联系技术支持以获取帮助。
              </p>
              <div className='mt-4'>
                <Button
                  className='inline-flex items-center gap-2 rounded-md bg-red-500 py-1.5 px-3 text-sm/6 font-semibold text-white shadow-inner shadow-white/10 focus:outline-none data-[hover]:bg-gray-600 data-[focus]:outline-1 data-[focus]:outline-white data-[open]:bg-gray-700'
                  onClick={close}
                >
                  下载失败
                </Button>
              </div>
            </DialogPanel>
          )}
        </div>
      </div>
    </Dialog>
  );
};

export default ShowDialog;

定义了一个 isSuccess 来判断请求成功/失败，从而渲染不同样式。
回到/app/download/page.tsx页面中,在下载按钮上面,添加下面代码:

    {mutation.isError && <ShowDialog isSuccess={false}></ShowDialog>}
    {mutation.isSuccess && <ShowDialog isSuccess={true}></ShowDialog>}

来测试一下,修改一个请求参数,改成一个错误的参数,然后点击下载，进度条不动，过一会会弹出一个提示框。

然后恢复到正确的参数,测试下载,当进度条到100%以后，会弹出这个提示框。

可以看到使用react query，管理状态是非常简单的。

十五、实现上传进度条

上传进度要麻烦一些,最主要是需要处理数据验证, 重点是是使用 react-hook-form 和zod的验证, 首先安装一下必要工具

npm install zod  react-hook-form

另外需要使用form，所以在plugins中配置tailwindcss 使用forms,首先安装

npm install -D @tailwindcss/forms

然后到tailwind.config.ts 文件中，添加

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/forms'),
    // ...
  ],
}

十六、创建一个上传页面

新建一个上传页面/app/upload/page.tsx,添加下面代码

'use client'
import { useForm } from "react-hook-form";

export default function UploadPage() {
    const {
        register,
        handleSubmit,
        formState: { errors },
    } = useForm({

    });
    return (
        <div className="mx-auto max-w-screen-xl px-4 py-16 sm:px-6 lg:px-8">
            <div className="mx-auto max-w-lg">
                <h1 className="text-center text-2xl font-bold text-indigo-600 sm:text-3xl">上传文件进度条</h1>

                <p className="mx-auto mt-4 max-w-md text-center text-gray-500">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati sunt dolores deleniti
                    inventore quaerat mollitia?
                </p>

                <form onSubmit={handleSubmit((data) => console.log(data))} className="mb-0 mt-6 space-y-4 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8">
                    <p className="text-center text-lg font-medium">上传文件</p>

                    <div className="col-span-full">
                        <label htmlFor="filename" className="sr-only">filename</label>
                        <div className="relative">
                            <input
                                type="text"
                                className="w-full rounded-lg border-gray-200 p-4 pe-12 text-sm shadow-sm"
                                placeholder="请填写文件名"
                            />

                        </div>
                    </div>

                    <div className="col-span-full">
                        <label
                            htmlFor="desc"
                            className="block text-sm font-medium leading-6 text-gray-900"
                        >
                            文件简介
                        </label>
                        <div className="mt-2">
                            <textarea
                                id="desc"
                                placeholder="请填写文件简介"
                                rows={3}
                                className="block w-full rounded-md border-0 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:py-1.5 sm:text-sm sm:leading-6"
                                defaultValue={""}
                            />


                        </div>
                    </div>
                    <div className="col-span-full">
                        <label
                            htmlFor="file"
                            className="block text-sm font-medium leading-6 text-gray-900"
                        >
                            选择文件
                        </label>
                        <div className="mt-2 flex justify-center rounded-lg border border-dashed border-gray-900/25 px-6 py-4">
                            <div className="text-center">

                                <div className="mt-4 flex text-sm leading-6 text-gray-600">
                                    <label
                                        htmlFor="file"
                                        className="relative cursor-pointer rounded-md bg-white font-semibold text-indigo-600 focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-600 focus-within:ring-offset-2 hover:text-indigo-500"
                                    >
                                        <span>选择文件</span>

                                        <input

                                            type="file"
                                            id="file"
                                            className="sr-only"
                                        />
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <button
                        type="submit"
                        className="block w-full rounded-lg bg-indigo-600 px-5 py-3 text-sm font-medium text-white"
                    >
                        上传
                    </button>

                </form>
            </div>
        </div>
    )
}

不要忘记在顶部添加 'use client',完成后页面类似这样

十八、选择文件

在选择文件中,我希望可以显示文件名称,即当选择文件后，上传按钮变成删除按钮,同时显示选中的文件名,因此定义两个变量。

const [fileUpload, setFileUpload] = useState<FileList | null>(null); //设置获取文件
const [fileName, setFileName] = useState<string>(""); //选择后显示文件的名称

创建处理文件的函数,一个处理文件,一个删除文件

    //获取文件
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;
    console.log('files', files);//打印调试
    if (files && files.length > 0) {
        setFileUpload(files[0]); // 更新状态
        setFileName(files?.[0].name)
    }
};
    // 重置文件选择
const handleRemoveFile = () => {
    setFileName("");
    setFileUpload(null); // 重置文件输入字段
};

完成后的效果如下

十七、使用useform

使用useform注册字段，并添加验证选项。
文件名称是必须的,最大的字符是10字符。

    <div className="sm:col-span-4">
        <label
            htmlFor="title"
            className="block text-sm font-medium leading-6 text-gray-900"
        >
            文件名称
        </label>
        <input
            id="title"
            {...register("title", { required: true, maxLength: 10 })}
        />

        {/* useform 错误信息 */}
        {errors.title?.type === "required" && (
            <p className="text-red-500 ">⚠ 标题不能为空</p>
        )}
        {errors.title?.type === "maxLength" && (
            <p className="text-red-500 ">⚠ 标题长度不能超过10个字符</p>
        )}
    </div>

文件详情是必须的,最大的字符是200字符。

    <div className="mt-2">
    <textarea
        id="desc"
        {...register("desc", { required: true, maxLength: 100 })}
        placeholder="请填写文件简介"
        rows={3}
        className="block w-full rounded-md border-0 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:py-1.5 sm:text-sm sm:leading-6"
        defaultValue={""}
            />
            {/* useform 错误信息 */}
    {errors.desc?.type === "required" && (
        <p className="text-red-500 ">⚠ 详细信息不能为空</p>
    )}
    {errors.desc?.type === "maxLength" && (
        <p className="text-red-500 ">⚠ 详细信息不能超过200个字符</p>
    )}

        </div>

文件暂时设置必须。其他验证等一会我们使用zod验证。

    <div className="mt-4 flex text-sm leading-6 text-gray-600">
    <label
        htmlFor="file"
        className="relative cursor-pointer rounded-md bg-white font-semibold text-indigo-600 focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-600 focus-within:ring-offset-2 hover:text-indigo-500"
    >
        <span>选择文件</span>
        <input
            {...register("file", {
                required: true,
            })}
            type="file"
            id="file"
            className="sr-only"
        />
        {errors.desc?.type === "required" && (
            <p className="text-red-500 ">⚠ 详细信息不能为空</p>
        )}
    </label>
</div>

测试一下

长度验证

十八、使用zod进行文件验证

目前我们只是使用usfeform进行简单验证，如果要验证文件大小类型等复杂验证,还无法实现,因此使用zod来验证
先安装一下。

npm install  zod @hookform/resolvers

验证规则单独放一个文件中,创建一个文件 /app/lib/validata.ts,添加下面内容

import { z } from 'zod';
const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
// 根据需要增减文件类型
const ACCEPTED_IMAGE_TYPES = [
  'image/jpeg',
  'image/jpg',
  'image/png',
  'image/webp',
];

// 验证文件上传
export const validationSchema = z.object({
title: z
    .string()
    .min(4, "名称不能小于4个字符")
    .max(20, "名称最多为20个字符"),
desc: z
    .string()
    .min(4, "名称不能小于4个字符")
    .max(200, "名称最多为200个字符"),
fileUpload: z
    .custom<FileList>((v) => v instanceof FileList)
    .transform((val) => {
      console.log("val:", val); // 调试信息：打印输入值
      if (val instanceof File) return val;
      if (val instanceof FileList) return val[0];
      return null; })
    // 验证文件大小
    .refine(
      (file) => file instanceof File && file.size <= MAX_FILE_SIZE,
      {message: `文件大小不能超过 ${MAX_FILE_SIZE / (1024 * 1024)} MB`, }
    )
    // 验证文件类型
    .refine(
      (file) => file instanceof File && ACCEPTED_IMAGE_TYPES.includes(
          file.type
        ),
      { message: '类型不支持,请选择 (jpeg, jpg, png, webp)类型', }
    )
});

这里主要看一下file字段，首先检查传入的值不是 FileList,因为我的端口接受的是单个File, 所以通过 transform 方法对 FileList 进行处理，所以将其转换为单个 File 实例, 必须为图片文件, 然后限定最大可上传文件为5M。你可以根据实际情况添加更多验证规则。
回到上传页面, 添加下面代码:

import { validationSchema } from "../lib/validate";
import { zodResolver } from "@hookform/resolvers/zod";
    const {
        register,
        handleSubmit,
        formState: { errors },
    } = useForm({
// 添加下面这段代码
      defaultValues: {
            title: "",
            desc: "",
            file: null,
        },

      resolver: zodResolver(validationSchema),

    });

修改原来的错误提示代码,

    {errors.title && (
        <p className="text-red-500 ">⚠{errors.title.message}</p>
    )}

详情错误提示

   {errors.desc && (
       <p className="text-red-500 ">⚠{errors.desc.message}</p>
   )}

文件错误提示

   {errors.file && (
       <p className="text-red-500 ">⚠{errors.fileUpload.message}</p>
   )}

测试一下

提交请求

因为使用的use-hook-form，所以按照要求定义个onSubmit函数,依旧使用react query 的useMutation 来处理。

    //获取请求地址
    const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL;
    const url = `${API_BASE_URL}/upload`;

    // 使用 useMutation 处理文件上传
    const mutation = useMutation({
        mutationFn: async (data: UploadFormInputs) => {
            const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL;
            const url = `${API_BASE_URL}/upload`;
            console.log("handle data",data)

            if (data.fileUpload instanceof File) {
                const formData = new FormData();
                formData.append('title', data.title);
                formData.append('desc', data.desc);
                formData.append('file', data.fileUpload);

                const response = await axios.post(url, formData, {
                    onUploadProgress: (progressEvent: any) => {
                        const progress = Math.round(
                            (progressEvent.loaded / progressEvent.total) * 100
                        );
                        setUploadProgress(progress);
                    },
                });

                return response.data;
            }
        },
        onSuccess: (data) => {
            console.log('File uploaded successfully', data);

        },
        onError: (error) => {
            console.error('Failed to upload file', error);
        },
        onSettled:()=>{
            setShowUploadProgress(false)
            reset()
            setFileUpload(null)
        }
    });
    //提交表单
    const onSubmit = async (data: UploadFormInputs) => {
        mutation.mutate(data)
    };

这里的内容和下载的内容类似,在上传完成后设置隐藏进度条,并重置表单。这里没有使用use hook form 的 set value,所以我们还需要手动恢复文件选择setFileUpload(null)。

修改ShowDialog

目前下载成功我们弹出的提示依旧是下载成功/失败,但是我们这里是上传页面,因此修改ShowDialog组件,使其兼容上传。
修改ShowDialog.tsx 文件

interface ShowDialog {
  isSuccess: boolean;
  action: string//添加这个

}

同时把ShowDialog.tsx 文件里面的下载全部修改为{action},修改下载文件页面中的代码传递action的值。

{mutation.isError && <ShowDialog isSuccess={false} action='下载'></ShowDialog>}
{mutation.isSuccess && <ShowDialog isSuccess={true} action='下载'></ShowDialog>}

上传页面也同样修改。传递值"上传"

{mutation.isSuccess && <ShowDialog isSuccess={true} action='上传'></ShowDialog>}
{mutation.isError && <ShowDialog isSuccess={false} action='上传'></ShowDialog>}

你可以修改文字使其更符合状态提示。这样我们也完成了文件上传的进度条显示。

总结

在本文中，我们深入探讨了如何在 Next.js 应用中处理文件上传，并结合 Tailwind CSS、React Hook Form、Zod、Axios 和 React Query 等工具，创建了一个功能完善、用户体验良好的上传组件。从表单管理到数据验证，从文件处理到上传进度展示，我们覆盖了文件上传过程中的关键环节。

在开发过程中，使用这些工具不仅提升了我们的开发效率，还保证了代码的可维护性和扩展性。这种组合方式展示了如何在复杂的项目中，将各个库和框架的优势最大化，创造出高质量的用户体验。

希望通过这篇文章，您对文件上传的处理流程有了更深入的理解，并能够在自己的项目中应用这些技术。如果您有任何问题或想法，欢迎讨论和分享！

我的博客原文地址：https://blog.eimoon.com/p/nextjs-file-progress-bar-react-query/

中国大陆用户解决 Shopify Storefront API 网络问题的详细指南

likun — Sun, 21 Jul 2024 02:57:24 +0000

当在开发使用 Shopify Storefront API 的 Next.js 项目时, 你可能会遇到一个头疼的错误：“Client network socket disconnected before secure TLS connection was established”。这个问题困扰了我整整一个下午, 但是最终我成功解决了它！原来这个问题是由于中国大陆的网络防火墙导致的, 即使我将代理设置为全局模式也无济于事。但是, 通过开启代理的增强模式, 我终于解决了这个问题。因此在我的博客记录一下解决这个问题的过程

💡第一次尝试开启全局代理

由于错误提示与网络问题相关,问chatgpt后也是差不多的意思,我首先怀疑是网络连接不稳定导致的。这对于在大陆开发是经常的事情,因此,我将代理设置为全局模式,确保所有网络请求都通过代理服务器。不幸的是,错误依旧存在,问题并没有得到解决。

💡第二次尝试直连接模式

我怀疑可能是代理设置的问题,于是尝试将代理模式改为直连模式,看看是否能够解决问题。错误依旧存在,没有任何改善。我退出了代理软件,再试了试,还是同样的错误。

💡使用postman测试api

我开始怀疑是否不是网络问题, 于是使用 Postman 测试了我的 Shopify Storefront API。在没有代理的情况下, 请求无法成功; 但是开启代理后, 我的请求顺利得到了响应。这证明了我的 API 配置没有问题, 但是访问 API 确实需要使用代理。

💡第三次尝试开启增强模式

第三次我查看shopify社区这个帖子,这个是讨论shopify cli的,但是对于store front api 可能也适用。这里有人提到把网络改成增强模式,我决定尝试这种方法,看看是否也适用于 Storefront API。当我将代理模式切换到增强模式后,奇迹发生了——问题成功解决,我可以顺利发送请求并获得响应。这让我感到非常兴奋。奇怪的是,当我把代理模式改回规则+普通模式后,请求居然也成功了。这让我感到困惑,但至少问题已经解决。

结语

中国大陆的开发者在使用 Shopify Storefront API 时可能会遇到一些额外的挑战,但通过一些创造性的解决方案和耐心的尝试,这些问题是可以克服的。希望我的经验和解决方案能够帮助你顺利地进行开发工作。如果你有类似的经历或其他解决方法,欢迎在评论区分享你的经验。
我的博客原文地址

使用 ImageMagick 命令行工具处理图像指南

likun — Tue, 09 Jul 2024 10:13:34 +0000

ImageMagick 是一款免费的开源命令行工具，允许用户执行各种图像处理任务，例如图像转换、调整大小、裁剪、旋转、添加效果等。它支持多种图像格式，可在 Linux、Windows 和 macOS 上使用。在本教程中，我们将介绍 ImageMagick 中一些最常见的命令和选项。本文同步发布在我的博客

一、安装

在我们开始之前，你需要在系统上安装 ImageMagick,你可以从官方网站下载它。

1.mac上安装

在mac上使用homebrew安装即可。



brew install imagemagick

2.windows上安装

在windows上安装先查看的系统,查看 设置--系统--系统信息,
除非您使用的是 Windows 32 位操作系统，否则建议 64 位 Windows 上使用以下版本的 ImageMagick：ImageMagick-7.1.1-34-Q16-HDRI-x64-dll.exe,安装方式和其他软件一样,基本上是下一步下一步即可。
下载地址

如果你喜欢便携版本,也可以下载免安装的版本,根据系统不同在这里选择你的便携包。
例如: 你的系统是x64位，使用每像素 16 位组件, 则选择
ImageMagick-7.1.1-34-portable-Q16-x64.zip
下载解压到你的文件夹使用。
下载地址

3.检查安装

要检查它是否已安装，请打开终端并运行:



magick --version

如果您看到类似下面的输出，那么您就代表安装好了！



Version: ImageMagick 7.1.1-34 Q16-HDRI aarch64 22301 https://imagemagick.org
Copyright: (C) 1999 ImageMagick Studio LLC
License: https://imagemagick.org/script/license.php
Features: Cipher DPC HDRI Modules OpenMP(5.0)
Delegates (built-in): bzlib fontconfig freetype gslib heic jng jp2 jpeg jxl lcms lqr ltdl lzma openexr png ps raw tiff webp xml zlib zstd
Compiler: gcc (4.2)

二、基本命令

ImageMagick 拥有众多功能和能力。我将重点介绍我日常的使用一些功能,处理一些简单、实用的用例，但实际上，我们只是触及了此工具的表面。还有更多操作可以查看官方文档。

1.查看图片信息

在使用之前我们先了解一下检查图片信息的命令,使用 magick identify 检查你的图片信息。



 magick identify tiger.jpg

输出



tiger.jpg JPEG 1280x853 1280x853+0+0 8-bit sRGB 279261B 0.000u 0:00.000

各个参数的代表的意义：

tiger.webp:文件名。
WEBP:图像格式（WEBP）。
1280x853:图像的维度，宽度为800像素，高度为400像素。
1280x853+0+0:图像维度和偏移量。
1280x853 表示图像的宽度和高度。
+0+0 表示图像的偏移量（起始点位置），在这里表示没有偏移（从左上角开始）。
8-bit:每个颜色通道的位深度（这里是8位）。
sRGB:图像的颜色空间（标准RGB颜色空间）。
279261B:图像文件的大小（字节），这里是279261字节（约279KB）。
0.000u:用户CPU时间（以秒为单位），即处理图像所花费的CPU时间。
0:00.000:真实时间（以分钟和秒为单位），即处理图像所花费的实际时间

2.转换图像格式

要将图像从一种格式转换为另一种格式，ImageMagick支持超过200种不同的图像格式，包括但不限于 PNG、JPEG、GIF、WebP、HEIC、SVG、PDF、DPX、EXR 和 TIFF 等。如果要转换图片格式,请使用命令 magick(以前版本是convert)后跟输入和输出文件名。例如，要将 PNG 图像转换为 WEBP，请运行：



 magick input.png output.webp

同样，你想转换一个目录中的所有png 到webp,可以使用下面命令应用于目录中的所有图像：



mogrify -format webp *.png

这会将当前目录中的所有 PNG 文件转换为 WEBP,并保持原文件不变。

3.调整图像大小

要调整图像大小，请使用-resize 参数，后跟新尺寸。例如，要将图像大小调整为800x600像素，请运行：



magick input.jpg -resize 800x600 output.jpg

您还可以以百分比的方式来缩放图片：



magick input.jpg -resize 50% output.jpg

这会将图像大小调整为原始尺寸的 50％，通常，更改图像大小的最常见方法是将其缩小以适应所需大小。但是可以完全放大图像。

4.翻转和旋转

现在让我们看看如何翻转和旋转图像，这有时很有用。要旋转图像，请使用-rotate 参数。例如，要将图像顺时针旋转 60 度，请运行：



magick input.jpg -rotate 60 output.jpg

您还可以将旋转角度指定为负值以逆时针旋转：



magick input.jpg -rotate -60 output.jpg

5.裁剪图像

要裁剪图像，请使用-crop选项的命令，后跟新尺寸。裁剪的原点在左上角,例如，要从左上角开始将图像裁剪为 400x400 像素，请运行：



magick input.jpg -crop 400x400+0+0 output.jpg

该400x400部分指定新的尺寸，+0+0指定裁剪的起点。

您还可以将起点指定为图像大小的百分比：



magick input.jpg -crop 50%x50%+0+0 output.jpg

这会从图像的左上角开始将图像裁剪为原始尺寸的 50％。

5.添加水印

要给图片添加水印,使用下面类似下面的命令,例如在右下角添加一个“blog.eimoon.com”的水印。



magick image.jpg -gravity SouthEast -pointsize 24 -fill white -annotate +10+10 "blog.eimoon.com" image_watermarked.jpg

下面解释一下每个参数的含义：

magick: ImageMagick的命令行工具，用于图像转换和处理。
image.jpg: 输入的图片文件。
-gravity SouthEast: 将水印定位在图片的右下角（东南角）。
-pointsize 24: 设置水印文字的大小为24点。
-fill white: 设置水印文字的颜色为白色。
-annotate +10+10 "blog.eimoon.com": 在指定位置添加水印文本。+10+10 表示将水印文字从右下角向左上方偏移10像素，以免贴边太近。
image_watermarked.jpg: 输出的图片文件，带有水印。
您可以调整不透明度和重力值，将水印放置在您喜欢的任何位置。您还可以为图片添加更多效果。尝试不同的选项，看看您能想出什么样的创意效果. ### 6.添加模糊效果要为图像添加模糊效果，使用-blur参数，后跟半径和 sigma 值。sigma 值决定模糊量。要添加半径和 sigma 值为 5 的高斯模糊，请运行： ```shell

magick tiger.jpg -blur 5X5 tiger2.jpg


![模糊效果](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hiviktxcuoldzw83dwgi.png)

### 7.添加锐化效果
要为图像添加锐化效果，请使用-sharpen选项的命令，后跟半径和 sigma。要添加半径为 0 且 sigma 为 1 的锐化效果，请运行：
```shell


 magick tiger.jpg -sharpen  0X1 tiger2.jpg

您可以调整半径和 sigma 值来创建不同级别的锐化.

结论

在本文中，我们介绍了 ImageMagick 提供的通过命令行处理图像的一些基本功能。还有一下颜色修改,生成gif动画,添加边框等等操作, 我使用的不多,如果你感兴趣的可以查看文档。
当然，再次强调,我们这些操作只触及了冰山一角，还有许多高级功能和选项可用,因此请务必查看ImageMagick 文档以了解更多详细信息。
原文我的博客