图片转svg标注_GIF、SVG、PNG、图片格式转换

GIF 动画

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

示例代码

先放上完整的示例：

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/ch1/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, "

"style='stroke: %s; fill: white; stroke-width: 0.7' "+

"width='%d' height='%d'>", color, width, height)

for i := 0; i < cells; i++ {

for j := 0; j < cells; j++ {

ax, ay := corner(i+1, j)

bx, by := corner(i, j)

cx, cy := corner(i, j+1)

dx, dy := corner(i+1, j+1)

fmt.Fprintf(w, "n",

ax, ay, bx, by, cx, cy, dx, dy)

}

}

fmt.Fprintln(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) 开始。从后向前绘制，就如左侧的图，因而后方的多边形可能被前方的遮住。

再看中间的图，在这个坐标系内，网络由三维浮点数 (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: %vn", err)

os.Exit(1)

}

defer pngFile.Close()

// 创建 jpg 文件

jpgFile, err := os.Create(jpgPath)

if err != nil {

fmt.Fprintf(os.Stderr, "ERROR: %vn", err)

os.Exit(1)

}

defer jpgFile.Close()

// 调用文件转换

if err := toJPEG(pngFile, jpgFile); err != nil {

fmt.Fprintf(os.Stderr, "jpeg: %vn", 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:Gosrcgoplch10jpeg> go run main.go

jpeg: image: unknown format

exit status 1

PS H:Gosrcgoplch10jpeg>

这个例子里是解码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 = "x89PNGrnx1an"

func init() {

image.RegisterFormat("png", pngHeader, Decode, DecodeConfig)

}

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

所以，可以多导入几个空包，这样程序就可以支持更多格式的解码了。