颤振飞镖图像选择器质量减少调整大小 - 飞镖

本程序专为飞镖爱好者设计，可以快速选择喜欢的飞镖图案，并对图案进行调整大小和减少质量的操作，以便更好地适应不同的打靶环境和设备。

特色功能

• 图像选择器：支持从本地文件和网络资源中加载图片，支持常见格式如 PNG、JPG、GIF 等。
• 质量减少：通过去除图片中的多余信息和精简图片颜色，可以将图片体积大幅压缩，便于上传和分享。
• 调整大小：可以按比例调整图片大小，以便更好地适应不同的设备分辨率和打靶场地要求。
• 飞镖图案收藏：支持将喜欢的图案收藏起来，方便后续使用。

运行要求

本程序为基于 Web 技术实现，需要运行在现代浏览器中，推荐 Chrome、Firefox、Safari 等。

代码示例

以下是本程序的核心代码，使用 JavaScript 和 HTML5 技术实现图像加载、处理和显示。

<!-- 在 HTML 中引入必要的 JS 和 CSS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>
<script src="https://cdn.jsdelivr.net/npm/localforage/dist/localforage.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/jquery-vanilla-autocomplete@2.0.4/dist/jquery.autocomplete.min.css">

<!-- 在 HTML 中添加图像选择器和处理结果区域 -->
<div id="image-picker"></div>
<div id="result"></div>

<!-- 使用 JavaScript 初始化图像选择器组件 -->
<script>
  const ImagePicker = require('image-picker');
  const picker = new ImagePicker('#image-picker', {
    extensions: ['.png', '.jpg', '.jpeg', '.gif'],
    maxSize: 1024 * 1024 * 2,
    getThumbnail: true,
  });
  picker.on('select', (image) => {
    const reader = new FileReader();
    reader.readAsDataURL(image.file);
    reader.onload = () => {
      $('#result').empty();
      const img = new Image();
      img.src = reader.result;
      img.onload = () => {
        // 利用 EXIF.js 读取图片旋转信息
        EXIF.getData(image.file, () => {
          const orientation = EXIF.getTag(image.file, 'Orientation');
          const canvas = document.createElement('canvas');
          const ctx = canvas.getContext('2d');
          // 根据旋转信息调整图片显示位置
          if (orientation > 4) {
            canvas.width = img.height;
            canvas.height = img.width;
          } else {
            canvas.width = img.width;
            canvas.height = img.height;
          }
          switch (orientation) {
            case 2: ctx.transform(-1, 0, 0, 1, canvas.width, 0); break;
            case 3: ctx.transform(-1, 0, 0, -1, canvas.width, canvas.height); break;
            case 4: ctx.transform(1, 0, 0, -1, 0, canvas.height); break;
            case 5: ctx.transform(0, 1, 1, 0, 0, 0); break;
            case 6: ctx.transform(0, 1, -1, 0, canvas.height, 0); break;
            case 7: ctx.transform(0, -1, -1, 0, canvas.height, canvas.width); break;
            case 8: ctx.transform(0, -1, 1, 0, 0, canvas.width); break;
            default: break;
          }
          ctx.drawImage(img, 0, 0);
          const newDataUrl = canvas.toDataURL('image/jpeg', 0.7);
          $('<img>').attr('src', newDataUrl).appendTo('#result');
        });
      };
    };
  });
</script>

结语

本程序致力于为飞镖爱好者提供便捷的图像选择和处理方式，欢迎各位爱好者试用和反馈，让我们一起更好地享受飞镖运动的乐趣。