JavaScript中，您可以使用HTML5的<input type="file">元素来实现图片上传功能。

以下是一个简单的示例代码，演示如何在JavaScript中上传图片：

HTML部分：

<input type="file" id="uploadInput">
<button onclick="uploadImage()">上传图片</button>

JavaScript部分：

function uploadImage() {
  var fileInput = document.getElementById('uploadInput');
  var file = fileInput.files[0];

  if (file) {
    var formData = new FormData();
    formData.append('image', file);

    // 发送图片数据到服务器
    // 这里可以使用XMLHttpRequest或fetch等方法发送请求
    // 请根据您的需求选择适当的方法
    // 示例中使用XMLHttpRequest发送POST请求
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload', true);
    xhr.onload = function() {
      if (xhr.status === 200) {
        // 上传成功
        console.log('图片上传成功');
      } else {
        // 上传失败
        console.log('图片上传失败');
      }
    };
    xhr.send(formData);
  }
}

API部分：

[HttpPost]
[RequestSizeLimit(5242880)]
 public async Task<APIResult> upload(IFormCollection collection)
 {

            APIResult rtn = new APIResult();

            if (collection == null)
            {
                rtn.code = -100;
                rtn.msg = "图片列表为空";
                return rtn;
            }
            else
            {
                try
                {
                    string file_path = "";
                    // 预处理 用户参数:用户指定子路径                   
                    string userPath = DateTime.Now.ToString("yyyy-MM-dd");
                    if (collection.ContainsKey("path"))
                    {
                        collection.TryGetValue("path", out Microsoft.Extensions.Primitives.StringValues val);
                        if (!val.Equals("undefined"))
                        {
                            userPath = val.ToString();
                        }
                    }

                    // 预处理 文件路径
                    // 注意：这里可能会根据不同的环境来 修改 路径前面是否需要添加 /
                    // 当发现上传不成功，目录无法创建时，可以尝试修改这里
                    file_path = $"upload/imgs/{userPath}/";
                    var uploadPath = Path.Combine(_webHostEnvironment.WebRootPath, file_path);
                    if (!Directory.Exists(uploadPath))
                    {
                        Directory.CreateDirectory(uploadPath);
                    }

                    // 处理文件
                    FormFileCollection filelist = (FormFileCollection)collection.Files;
                    foreach (IFormFile file in filelist)
                    {
                        // 保存文件到磁盘
                        string name = file.FileName;
                        string FilePath = Path.Combine(uploadPath, name);
                        string type = Path.GetExtension(name);
                        using (var stream = System.IO.File.Create(FilePath))
                        {
                            await file.CopyToAsync(stream);
                        };

                        // 保存文件信息到表
                        Sys_File f = new Sys_File();
                        f.code = "image";
                        f.name = name;
                        f.file_type = type.Trim('.');
                        f.file_group = userPath;
                        f.file_path = $"/{file_path}{name}";
                        f.is_active = true;
                        f.memo = "";
                        f.createTime = DateTime.Now;
                        using (var dbctx = DBHelper.db)
                        {
                            await dbctx.AddAsync(f);
                            await dbctx.SaveChangesAsync();
                        };
                        // 返回消息，包含文件路径
                        rtn.datas = $"/{file_path}{name}";
                        rtn.code = 100;
                        rtn.msg = "文件已保存！";
                    }
                }
                catch (Exception ex)
                {
                    rtn.code = -200;
                    rtn.msg = "图片保存失败!";
                    Log4NetUnit.Instance.Log.Error("图片保存失败:" + ex.Message);
                }
                return rtn;
            }
        }

在这个示例中，我们首先在HTML中创建了一个<input type="file">元素，用于选择要上传的图片。

然后，我们在JavaScript中编写了一个uploadImage函数，该函数在点击"上传图片"按钮时触发。

在uploadImage函数中，我们首先获取到<input>元素，并从中获取到用户选择的图片文件。

然后，我们创建一个FormData对象，并将图片文件添加到其中。

接下来，我们可以使用XMLHttpRequest或fetch等方法将图片数据发送到服务器。

在示例中，我们使用XMLHttpRequest发送了一个POST请求，将图片数据作为FormData发送到/upload端点。

您需要根据您的实际情况修改URL和请求方法。

当请求完成时，我们可以根据响应的状态码来判断上传是否成功。

在示例中，如果状态码为200，则表示上传成功，否则表示上传失败。

请注意，由于安全性限制，JavaScript无法直接访问用户的文件系统。

因此，用户必须手动选择要上传的文件。

网络上，有序列表可以使您的 HTML 页面更有组织、简洁且易于阅读。在本文中，我将向您展示如何在 HTML 中创建高质量、有趣的有序列表。您将学习如何在平凡的列表中带来鲜为人知的＂Wow＂效果。让我们开始吧！

一、HTML 中的 ordered list 基础

HTML 中的有序列表（ordered list）使用 <ol> 元素创建，并且对于每个列表项使用 <li> 元素。下面是一段有序列表的基本示例：

html

<ol>
<li>项目 1</li>
<li>项目 2</li>
</ol>

在上面的示例中，您可以看到列表由 <ol> 元素包围，每个列表项使用 <li> 元素表示。

二、美化有序列表

要让您的有序列表更具吸引力，您可以通过使用 CSS 进行累积 зі熄culation。以下是一些建议：

1. 自定义列表部分的风格： affair CAN I USE CSS 属性供您选择，例如颜色、背景图片、边框、边距和填充。此外，可以使用盒子阴影为列表添加浅显的三维效果。
2. 更新列表标记： 更先Progressive Enhancement，在文本内容之前使用数字列表标记，可以让列表更立体。您可以使用 CSS Counter 功能自动结合标记和内容。

css

像处理库 (IML) 用于对图像执行各种处理功能：你可以增加图像的亮度、添加饱和度或滤镜、裁剪和调整大小，以及更多有价值的功能，这些功能将帮助你完成几乎所有事情并将你的网络浏览器变成 Adob​e Lightroom！

我们为每项重要的图像处理任务都提供了库，从简单的低级操作（例如滤镜、亮度和饱和度）到用于裁剪或图像合成的单一用途库。最后，我们进入了图像测试领域，因为没有可靠的方法来测试结果，任何图像处理应用程序都是不完整的。

NSDT工具推荐： Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器 - REVIT导出3D模型插件 - 3D模型语义搜索引擎 - Three.js虚拟轴心开发包 - 3D模型在线减面 - STL模型在线切割

1、Sharp

Sharp 是一个高性能 Node.js 图像处理库，用于调整不同图像格式（如 JPEG、PNG、WebP、AVIF、SVG 和 TIFF）的大小。此高速 Node.js 模块的典型用例是将标准格式的大图像转换为较小的、适合网络的图像。

只有当你想调整大型文件或多种文件的大小时，Sharp 才有用。另一方面，如果你只想调整单个小图像的大小，那么可能不应该使用它。相反，普通的 HTML 和原生 JavaScript 会更有用。Sharp 充分利用了多个 CPU 核心和 L1/L2/L3 缓存，让你可以更快地调整和压缩图像。

用例

我用它来调整整个 NFT 集合的大小，大小超过 80Gb，压缩后大约为 10Gb。所以，如果你想使用它来调整几张大图像的大小，那么它是你的最佳选择 - 你将以最快、最有效的方式完成它。

示例

你可以使用以下命令安装此库：

npm install sharp

使用 sharp 调整图像大小的方法如下：

const sharp = require('sharp');
const fs = require('fs');

sharp('yellow.png')
    .rotate(180)
    .resize(200)
    .toBuffer()
    .then( data => {
        fs.writeFileSync('yellow.png', data);
    })
    .catch( err => {
        console.log(err);
    });

2、Cropper.js

Cropper.js 是另一个流行的图像处理 JavaScript 库。你可以使用它以各种可能的方式裁剪图像、更改纵横比、旋转、缩放和处理画布数据。Cropper.js 是裁剪的正确选择，无需任何额外功能。

用例

你可以使用其灵活的 API 在你的 Web 应用中创建自定义图像裁剪 UI，让你的用户可以将照片调整为正确的大小和纵横比。它将更加高效，因为它几乎不需要任何东西，没有任何无用的功能，并且非常适合裁剪！

示例

可以使用以下命令安装此库：

npm install cropperjs

import Cropper from 'cropperjs';

const image = document.getElementById('image');
const cropper = new Cropper(image, {
  aspectRatio: 16 / 9,
  crop(event) {
    console.log(event.detail.x);
    console.log(event.detail.y);
    console.log(event.detail.width);
    console.log(event.detail.height);
    console.log(event.detail.rotate);
    console.log(event.detail.scaleX);
    console.log(event.detail.scaleY);
  },
});

查看 Cropper.js 演示，单击要应用于图像的任何属性并立即查看结果。

有关如何将图像裁剪添加到 React 应用的详细指南，请查看使用 react-image-crop 的指南。

3、合并图像

使用画布可能有点乏味，尤其是当你需要画布上下文来执行相对简单的事情（例如合并几张图像）时。Merge Images将所有重复任务抽象为简单的函数调用。它是 Canvas API 的包装器，抽象了其低级函数，这使得这项特定任务变得容易得多。你还可以创建参数，例如定位、不透明度等。你可以在 GitHub 上的文档中找到它们。

用例

这是一个有价值的库，可以帮助完成多项任务。例如，你可以生成一个 NFT 集合，你可以在其中合并所有组件以获得一套完整的变体。或者你会发现这个库对个人使用很有帮助，例如，组合几张不同的图像来生成拼贴画。

示例

安装库本身：

npm install --save merge-images

然后可以使用此代码生成一个简单的图像：

//write this inside of your javascript file

import mergeImages from 'merge-images';

mergeImages(['/body.png', '/eyes.png', '/mouth.png'])
  .then(b64 => document.querySelector('img').src = b64);

//And that would update the img element to show this image:

在这里，我用它来合并几个组件来创建最终的变体（这里我使用了背景、角色、喇叭、情感和配件）：

4、LooksSame

LooksSame 是一个用于比较图像的库。如果你上传的两张图片是重复的，该库会通知你。你所要做的就是提供想要比较的图片的链接。LooksSame 严格来说不是一个图像处理库，但对测试很有帮助。

用例

你可以使用这个库并编写代码来实现自动化和循环周期，以搜索目录并比较每对图像是否存在重复。此外，你还可以删除这些重复项并自动执行此过程。如果经常使用包含大量图像的 ML 算法，那么这是一个很棒的库。

示例

要开始比较图像，只需使用以下命令安装它：

npm i looks-same

在这里，你可以看到如何使用 Jest 测试这个库：

var looksSame = require('looks-same');

//Parameters can be paths to files or buffer with compressed png image

test('image1 and image2 are the same', async () => {
	expect(looksSame('image1.png', 'image2.png')).toBe(true);
});

//Result will be "image1 and image2 are the same" if they are the same

5、Jimp

Jimp 代表 JavaScript 图像处理程序，它允许你以几乎所有可能的方式编辑图像。有了它，你可以反转图像、添加一些文本、调整大小、使用像素化、克隆图像、模糊图像、反转颜色，以及其他一些很酷的功能，这些功能将提高应用程序的图像处理能力。

用例

使用 Jimp，你可以构建 Web 应用程序，在其中几乎可以以任何可能的方式编辑和处理图像。裁剪、调整大小、旋转和过滤功能让你可以创建自己的照片编辑器并在其上添加界面。

示例

以下是尝试这个优秀库的 JavaScript 代码。有一个异步函数，你可以在其中看到许多类型的属性，你可以轻松更改这些属性。例如添加文本、调整图像大小、模糊图像等。要使用其中至少一个，你只需要取消注释需要的部分，然后程序就可以运行了！

// Import dependencies
const Jimp = require("jimp");

(async function () {

    // Read the image
    const image = await Jimp.read("images/shapes.png"); // <http://www.example.com/path/to/lenna.jpg>

    // // Add text
    //  const font = await Jimp.loadFont(Jimp.FONT_SANS_16_WHITE); // bitmap fonts
    //  image.print(font, 0, 0, 'Hello world!'); // <https://github.com/libgdx/libgdx/wiki/Hiero>

    //  // Resize the image 
    //  // Resize the image to 250 x 250
    //  image.resize(250, 250);

    //  // Resize the height to 250 and scale the width accordingly
    //  image.resize(Jimp.AUTO, 250);

    //  // Resize the width to 250 and scale the height accordingly
    //  image.resize(250, Jimp.AUTO);

    //  // Add a sepia wash to the image
    //  image.sepia();

    //  // Pixelation 
    //  image.pixelate(5);
    //  image.pixelate(5, 50, 50, 190, 200); pixe,x, y, w, h 

    //  // Clone
    //  const image2 = image.clone();

    //  // Blur the image
    //  image.gaussian(1);
    //  image.blur(1);

    //  // Inverts the image
    //  image.invert(); 

    //  // Set the brightness
    //  image.brightness( 0.5 ); // -1 to +1

    //  // Resize the image
    //  image.resize(256, 256);

    //  // Set the quality
    //  image.quality(100);

    //  // Convert to grayscale
    //  image.greyscale();

    // Save the image
    image.write("images/edited-shapes.png"); // writeAsync

})();

PS：不要忘记取消注释你想要使用的效果，然后保存文件。:)

正如你在此处看到的，我模糊了所有内容并反转了之前向你展示的图像的颜色，得到了以下结果：

原文链接：Top5图像处理JS库 - BimAnt