GIF、SVG、PNG、图片格式转换-创新互联

GIF 动画

这篇展示 Go 标准库的图像包的使用。创建一系列的位图图像，然后将位图序列编码为 GIF 动画。示例要创建的图像叫做利萨如图形（Lissajous-Figure）,是20世纪60年代科幻片中的纤维状视觉效果。利萨如图形是参数化的二维谐振曲线，如示波器x轴和y轴馈电输入的两个正弦波。

创新互联公司为企业级客户提高一站式互联网+设计服务，主要包括网站制作、网站建设、重庆APP开发公司、小程序开发、宣传片制作、LOGO设计等，帮助客户快速提升营销能力和企业形象，创新互联各部门都有经验丰富的经验，可以确保每一个作品的质量和创作周期，同时每年都有很多新员工加入，为我们带来大量新的创意。

示例代码

先放上完整的示例：

package main

import (
    "image"
    "image/color"
    "image/gif"
    "io"
    "log"
    "math"
    "math/rand"
    "net/http"
    "os"
    "time"
)

var palette = []color.Color{color.White, color.Black}

const (
    whiteIndex = 0 // 画板中的第一种颜色
    blackIndex = 1 // 画板中的下一种颜色
)

func main() {
    rand.Seed(time.Now().UTC().UnixNano())
    if len(os.Args) > 1 && os.Args[1] == "web" {
        handler := func(w http.ResponseWriter, r *http.Request) {
            lissajous(w)
        }
        http.HandleFunc("/", handler)
        log.Fatal(http.ListenAndServe("localhost:8000", nil))
        return
    }
    lissajous(os.Stdout)
}

func lissajous(out io.Writer) {
    const (
        cycles  = 5     // 完整的x振荡器变化的个数
        res     = 0.001 // 角度分辨率
        size    = 100   // 图像画布包含[-size, size]
        nframes = 64    // 动画中的帧数
        delay   = 8     // 以10ms为单位的帧间延迟
    )
    freq := rand.Float64() * 3.0 // y振荡器的相对频率
    anim := gif.GIF{LoopCount: nframes}
    phase := 0.0 // phase differencs
    for i := 0; i < nframes; i++ {
        rect := image.Rect(0, 0, 2*size+1, 2*size+1)
        img := image.NewPaletted(rect, palette)
        for t := 0.0; t < cycles*2*math.Pi; t += res {
            x := math.Sin(t)
            y := math.Sin(t*freq + phase)
            img.SetColorIndex(size+int(x*size+0.5), size+int(y*size+0.5), blackIndex)
        }
        phase += 0.1
        anim.Delay = append(anim.Delay, delay)
        anim.Image = append(anim.Image, img)
    }
    gif.EncodeAll(out, &anim)  // 注意：忽略编码错误
}

lissajous函数

函数有两个嵌套的循环。外层有64个迭代，每个迭代产生一帧。创建一个201×201大小的画板，使用黑白两种颜色。所有的像素值默认设置为0，就是默认的颜色，这里就是白色。每一个内存循环通过设置一些像素为黑色产生一个新的图像。结果用append追加到anim的帧列表中，并且指定80ms的延迟。最后，帧和延迟的序列被编码成GIF格式，然后写入输出流out。
内层循环运行两个振荡器。x方向的振荡器是正弦函数，y方法也是正弦化的。但是它的频率频率相对于x的震动周期是0~3之间的一个随机数。它的相位相对于x的初始值为0，然后随着每个动画帧增加。该循环在x振荡器完成5个完整周期后停止。每一步它都调用SetColorIndex将对应画板上画的(x,y)位置设置为黑色，即值为1。

运行

main函数调用 lissajous 函数，直接写到标准输出，然后用输出重定向指向一个文件名，就生成gif文件了：

$ go build gopl/ch2/liaasjous
$ ./lissajous >out.gif

不过windows貌似不支持gif了。加上web参数调用程序，直接打开浏览器就能查看，每次刷新都是一张新的图形。

浮点数生成 SVG

该篇举了一个浮点绘图运算的例子。根据传入两个参数的函数 z=f(x,y)，绘出三维的网线状曲面，绘制过程中运用了可缩放矢量图形（Scalable Vector Graphics， SVG），绘制线条的一种标准XML格式。

示例代码

先放上完整的示例：

// 根据一个三维曲面函数计算并生成SVG，并输出到Web页面
package main

import (
    "fmt"
    "io"
    "log"
    "math"
    "net/http"
)

const (
    width, height = 600, 320            // 以像素表示的画布大小
    cells         = 100                 // 网格单元的个数
    xyrange       = 30.0                // 坐标轴的范围，-xyrange ~ xyrange
    xyscale       = width / 2 / xyrange // x 或 y 轴上每个单位长度的像素
    zscale        = height * 0.4        // z轴上每个单位长度的像素
    angle         = math.Pi / 6         // x、y轴的角度，30度
    color         = "grey"              // 线条的颜色
)

var sin30, cos30 = math.Sin(angle), math.Cos(angle)

func svg(w io.Writer) {
    fmt.Fprintf(w, "")
}

func corner(i, j int) (float64, float64) {
    // 求出网格单元(i,j)的顶点坐标(x,y)
    x := xyrange * (float64(i)/cells - 0.5)
    y := xyrange * (float64(j)/cells - 0.5)
    // 计算曲面高度z
    z := f(x, y)
    // 将(x,y,z)等角投射到二维SVG绘图平面上，坐标是(sx,sy)
    sx := width/2 + (x-y)*cos30*xyscale
    sy := height/2 + (x+y)*sin30*xyscale - z*zscale
    return sx, sy
}

func f(x, y float64) float64 {
    r := math.Hypot(x, y) // 到(0,0)的距离
    return math.Sin(r) / r
}

func main() {
    handler := func(w http.ResponseWriter, r *http.Request) {
        w.Header().Set("Content-Type", "image/svg+xml")
        svg(w)
    }
    http.HandleFunc("/", handler)
    log.Fatal(http.ListenAndServe("localhost:8000", nil))
    return
}

说明

corner函数返回两个值，构成网格单元其中一个格子的坐标。
理解这段程序需要一些几何知识。这段程序本质上是三套不同坐标系的相互映射，见下图。首先是一个包含 100×100 个单元的二维网络，每个网络单元用整数坐标 (i, j) 标记，从最远处靠后的角落 (0, 0) 开始。从后向前绘制，就如左侧的图，因而后方的多边形可能被前方的遮住。

GIF、SVG、PNG、图片格式转换

再看中间的图，在这个坐标系内，网络由三维浮点数 (x, y, z) 决定，其中x和y由i和j的线性函数决定，经过坐标转换，原点处于中央，并且坐标系按照xyrange进行缩放。高度值z由曲面函数 f(x,y) 决定。
最右边的图，这个坐标系是二维成像绘图平面（image canvas），原点在左上角。这个平面中点的坐标记作 (sx, sy)。这里用等角投影（isometric projection）将三维坐标点 (x, y, z) 映射到二维绘图平面上。若一个点的x值越大，y值越小，则其在绘图平面上看起来就越接近右方。而若一个点的x值或y值越大，且z值越小，则其在绘图平面上看起来就越接近下方。纵向 (x) 与横向 (y) 的缩放系数是由30度角的正弦值和余弦值推导而得。z方向的缩放系数为0.4，是个随意决定的参数值。
回到左边那张图的小图，二维网络中的单元由main函数处理，它算出多边形ABCD在绘图平面上四个顶点的坐标，其中B对应 (i, j) ，A、C、D则为其它三个顶点，然后再输出一条SVG指令将其绘出。

复数分形图

该篇通过复数的计算，生成 PNG 格式的分形图。

复数说明

Go具备了两种大小的复数 complex64 和 complex128，二者分别由 float32 和 float64 构成。内置的 complex 函数根据给定的实部和虚部创建复数，而内置的 real 函数和 imag 函数则分别提取复数的实部和虚部：

var x complex128 = complex(1, 2)  // 1+2i
// x := 1 + 2i
var y complex128 = complex(3, 4)  // 3+4i
// y := 3 + 4i
fmt.Println(x*y)  // -5+10i
fmt.Println(real(x*y))  // -5
fmt.Println(imag(x*y))  // 10

fmt.Println(1i * 1i)  // -1

示例代码

先放上完整的示例：

// 生成一个PNG格式的Mandelbrot分形图
package main

import (
    "fmt"
    "image"
    "image/color"
    "image/png"
    "math/cmplx"
    "os"
)

func main() {
    const (
        xmin, ymin, xmax, ymax = -2, -2, +2, +2
        width, height          = 1024, 1024
    )
    img := image.NewRGBA(image.Rect(0, 0, width, height))
    for py := 0; py < height; py++ {
        y := float64(py)/height*(ymax-ymin) + ymin
        for px := 0; px < width; px++ {
            x := float64(px)/height*(xmax-xmin) + xmin
            z := complex(x, y)
            // 点(px, py)表示复数值z
            img.Set(px, py, mandelbrot(z))
        }
    }
    f, err := os.OpenFile("p1.png", os.O_WRONLY|os.O_CREATE, 0666)
    if err != nil {
        fmt.Println("ERROR", err)
        return
    }
    defer f.Close()
    png.Encode(f, img)  // 注意：忽略错误
}

func mandelbrot(z complex128) color.Color {
    const iterations = 200
    const contrast = 15
    var v complex128
    for n := uint8(0); n < iterations; n++ {
        v = v*v + z
        if cmplx.Abs(v) > 2 {
            return color.Gray{255 - contrast*n}
        }
    }
    return color.Black
}

这个程序用 complex128 运算生成一个 Mandelbrot 集。

说明

两个嵌套循环在 1024×1024 的灰度图上逐行扫描每个点，这个图表示复平面上-2~+2的区域，每个点都对应一个复数，该程序针对各个点反复迭代计算其平方与自身的和，判断其最终能否超出半径为2的圆（取模）。然后根据超出边界所需的迭代次数设定点的灰度。在设定的迭代次数内没有超出的那部分点，这些点属于 Mandelbrot 集，就是黑色的内些部分。最后输出PNG图片。

输出到Web页面

这次将PNG写到img标签里，并且不生成图片文件，而是用base64对图片进行编码：

package main

import (
    "encoding/base64"
    "fmt"
    "image"
    "image/color"
    "image/png"
    "log"
    "math/cmplx"
    "net/http"
)

var f func(z complex128) color.Color

func main() {
    fmt.Println("http://localhost:8000/?f=newton")
    handler := func(w http.ResponseWriter, r *http.Request) {
        if err := r.ParseForm(); err != nil {
            log.Print(err)
        }
        if v, ok := r.Form["f"]; ok {
            switch v[0] {
            case "newton", "2":
                f = newton
            default:
                f = mandelbrot
            }
        }

        fmt.Fprint(w, ``)
        fmt.Fprint(w, ``)
        fmt.Fprint(w, ``)
    }
    http.HandleFunc("/", handler)
    log.Fatal(http.ListenAndServe("localhost:8000", nil))
    return
}

func createPng(w http.ResponseWriter) {
    const (
        xmin, ymin, xmax, ymax = -2, -2, +2, +2
        width, height          = 1024, 1024
    )
    img := image.NewRGBA(image.Rect(0, 0, width, height))
    for py := 0; py < height; py++ {
        y := float64(py)/height*(ymax-ymin) + ymin
        for px := 0; px < width; px++ {
            x := float64(px)/height*(xmax-xmin) + xmin
            z := complex(x, y)
            // 点(px, py)表示复数值z
            img.Set(px, py, f(z))
        }
    }
    b64w := base64.NewEncoder(base64.StdEncoding, w)  // 往b64w里写，就是编码后写入到w
    defer b64w.Close()
    png.Encode(b64w, img) // 注意：忽略错误
}

func mandelbrot(z complex128) color.Color {
    const iterations = 200
    const contrast = 15
    var v complex128
    for n := uint8(0); n < iterations; n++ {
        v = v*v + z
        if cmplx.Abs(v) > 2 {
            x := 255 - contrast*n
            switch n % 3 {
            case 0:
                return color.RGBA{x, 0, 0, x}
            case 1:
                return color.RGBA{0, x, 0, x}
            case 2:
                return color.RGBA{0, 0, x, x}
            }
        }
    }
    return color.Black
}

// f(x) = x^4 - 1
//
// z' = z - f(z)/f'(z)
//    = z - (z^4 - 1) / (4 * z^3)
//    = z - (z - 1/z^3) / 4
func newton(z complex128) color.Color {
    const iterations = 37
    const contrast = 7
    for i := uint8(0); i < iterations; i++ {
        z -= (z - 1/(z*z*z)) / 4
        if cmplx.Abs(z*z*z*z-1) < 1e-6 {
            // return color.Gray{255 - contrast*i}
            x := contrast*i
            switch i % 3 {
            case 0:
                return color.RGBA{x, 0, 0, x}
            case 1:
                return color.RGBA{0, x, 0, x}
            case 2:
                return color.RGBA{0, 0, x, x}
            }
        }
    }
    return color.Black
}

这里还增加一个的图形，运用牛顿法求某个函数的复数解（z^4-1=0）。原来的图形这次做成了彩图。

图片格式转换

image 包下有3个子包：

image.gif
image.jpeg
image.png

所以，这3种图片格式是标准库原生支持的。

格式转换

标准库的 image 包导出了 Decode 函数，它从 io.Reader 读取数据，并且识别使用哪一种图像格式来编码数据，调用适当的解碼器，返回 image.Image 对象作为结果。使用 image.Decode 可以构建一个简单的图像转换器，读取某一种格式的图像，然后输出为另外一个格式：

// 读取 PNG 图像，并把它作为 JPEG 图像保存
package main

import (
    "fmt"
    "image"
    "image/jpeg"
    _ "image/png" // 注册 PNG ×××
    "io"
    "os"
    "path/filepath"
)

func main() {
    fileName := "test"   // 不要扩展名
    dir, _ := os.Getwd() // 返回当前文件路径的字符串和一个err信息，忽略err
    pngPath := filepath.Join(dir, fileName+".png")
    jpgPath := filepath.Join(dir, fileName+".jpg")

    // 打开 png 文件
    pngFile, err := os.Open(pngPath)
    if err != nil {
        // 文件可能不存在
        fmt.Fprintf(os.Stderr, "ERROR: %v\n", err)
        os.Exit(1)
    }
    defer pngFile.Close()

    // 创建 jpg 文件
    jpgFile, err := os.Create(jpgPath)
    if err != nil {
        fmt.Fprintf(os.Stderr, "ERROR: %v\n", err)
        os.Exit(1)
    }
    defer jpgFile.Close()

    // 调用文件转换
    if err := toJPEG(pngFile, jpgFile); err != nil {
        fmt.Fprintf(os.Stderr, "jpeg: %v\n", err)
        os.Exit(1)
    }
}

func toJPEG(in io.Reader, out io.Writer) error {
    img, kind, err := image.Decode(in)
    if err != nil {
        return err
    }
    fmt.Fprintln(os.Stderr, "Input format =", kind)
    return jpeg.Encode(out, img, &jpeg.Options{Quality: 95})
}

该程序打开一个png文件，再创建一个新的jpg文件，然后进行图像格式的转换。
注意空白导入"image/png"。如果没有这一行，程序可以正常编译和链接，但是不能识别和解码 PNG 格式的输入：

PS H:\Go\src\gopl\ch20\jpeg> go run main.go
jpeg: image: unknown format
exit status 1
PS H:\Go\src\gopl\ch20\jpeg>

这个例子里是解码png格式的图片，程序能识别png格式是因为上面的一行空导入。也可以支持其他格式，并且是同时支持的，只要多导入几个包。具体看下面的展开。

格式解码

接下来解释它是如何工作的。标准库提供 GIF、PNG、JPEG 等格式的解码库，用户自己可以提供其他格式的，但是为了使可执行程序简短，除非明确需要，否则解碼器不会被包含进应用程序。image.Decode 函数查阅一个关于支持格式的表格。每一个表项由4个部分组成：

格式的名字
某种格式中所使用的相同的前缀字符串，用来识别编码格式
一个用来解码被编码图像的函数 Decode
另一个函数 DecodeConfig，它仅仅解码图像的元数据，比如尺寸和色域

对于每一种格式，通常通过在其支持的包的初始化函数中来调用 image.RegisterFormat 来向表格添加项。例如 image.png 中的实现如下：

package png // image/png

func Decode(r io.Reader) (image.Image, error)
func DecodeConfig(r io.Reader) (image.Config, error)

const pngHeader = "\x89PNG\r\n\x1a\n"
func init() {
    image.RegisterFormat("png", pngHeader, Decode, DecodeConfig)
}

这个效果就是，一个应用只需要空白导入格式化所需的包，就可以让 image.Decode 函数具备应对格式的解码能力。
所以，可以多导入几个空包，这样程序就可以支持更多格式的解码了。

创新互联www.cdcxhl.cn，专业提供香港、美国云服务器，动态BGP最优骨干路由自动选择，持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证，机房独有T级流量清洗系统配攻击溯源，准确进行流量调度，确保服务器高可用性。佳节活动现已开启，新人活动云服务器买多久送多久。

本文题目：GIF、SVG、PNG、图片格式转换-创新互联
浏览路径：http://6mz.cn/article/djgohd.html

网站建设知识

GIF、SVG、PNG、图片格式转换-创新互联

GIF 动画

示例代码

lissajous函数

运行

浮点数生成 SVG

示例代码

说明

复数分形图

复数说明

示例代码

说明

输出到Web页面

图片格式转换

格式转换

格式解码

其他资讯