用 wails 构建图片查看工具，让图片浏览不再繁琐！

前端

2023-01-10 17:31:08

用 Wails 构建跨平台图片查看器：一个循序渐进的指南

1. Wails 简介

Wails 是一个基于 Go 语言的跨平台 GUI 框架。凭借其跨平台兼容性、简单易用的 API 和强大的功能，它已成为构建跨平台桌面应用程序的热门选择。

2. 图片查看工具简介

本教程将指导您构建一个功能齐全的图片查看工具，它将提供以下功能：

打开本地图片
查看图片信息（元数据）
缩放图片
旋转图片
保存图片

3. 实施图片查看工具

3.1 设置 Wails 项目

首先，使用 Wails CLI 工具创建一个项目：

wails create my-image-viewer

3.2 添加资源服务

Wails 资源服务允许您访问本地文件。在 main.go 文件中添加以下代码：

package main

import (
	"context"
	"io/ioutil"
	"log"
	"net/http"

	"github.com/wailsapp/wails"
)

func main() {
	app := wails.CreateApp(&wails.AppConfig{
		Width:  1024,
		Height: 768,
		Title:  "Image Viewer",
	})
	app.Bind(func(ctx context.Context) *http.ServeMux {
		mux := http.NewServeMux()
		mux.Handle("/", http.FileServer(http.Dir("res")))
		return mux
	})
	app.Run()
}

3.3 打开本地图片

在 index.html 文件中添加以下代码：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <input type="file" id="file-input" accept="image/*" />
  <div id="image-container"></div>
</body>
</html>

在 index.js 文件中添加以下代码：

const fileInput = document.getElementById('file-input');
const imageContainer = document.getElementById('image-container');

fileInput.addEventListener('change', function() {
  const file = this.files[0];
  const reader = new FileReader();

  reader.onload = function() {
    const image = document.createElement('img');
    image.src = reader.result;
    imageContainer.appendChild(image);
  };

  reader.readAsDataURL(file);
});