ascii图像生成器_通过构建图像到ASCII转换器的WebAssembly和Go入门

ascii图像生成器

TL;DR This blog illustrates how you can import your existing go code to Wasm, and run it in the browser. In this blog, I will show you how I made a tool to convert Image to Ascii characters on the browser that was written in Go. Link to the Github repo: wasm-go-image-to-ascii. Here is the Demo: Image to Ascii

TL; DR该博客说明了如何将现有的go代码导入Wasm,并在浏览器中运行它。 在此博客中,我将向您展示如何制作工具,以在用Go语言编写的浏览器上将Image转换为Ascii字符。 链接到Github 仓库 wasm-go-image-to-ascii 。 这是演示: Ascii的图像

什么是WebAssembly? (What is WebAssembly?)

Before moving on to writing the code, let’s first understand what WebAssembly is. WebAssembly or WASM is an assembly-like language that can run in near-native performance in the browser. It is not to be written manually but to be treated as a compilation target for languages such as C/C++, Golang, Rust, .Net, etc. This means first we write a program in a language, then convert it to WASM and then run it in the browser. This will allow the program to run in near-native speed and give the ability to run a program written in any language to run on the browser. You can create web applications in the language you are familiar with. It doesn’t mean it will remove javascript but exist hand in hand with JavaScript. The list of languages that support WASM compilation is in awesome-wasm-langs and more info on WebAssembly Webpage and WebAssembly Concepts.

在继续编写代码之前,让我们首先了解什么是WebAssembly。 WebAssembly或WASM是一种类似于汇编的语言,可以在浏览器中以接近本机的性能运行。 它不是手动编写的,而是被视为C / C ++,Golang,Rust,.Net等语言的编译目标。这意味着首先我们用某种语言编写程序,然后将其转换为WASM,然后再将其转换为WASM在浏览器中运行它。 这将使程序能够以接近本机的速度运行,并能够运行以任何语言编写的程序以在浏览器上运行。 您可以使用您熟悉的语言创建Web应用程序。 这并不意味着它将删除javascript,而是与JavaScript并存。 支持WASM编译的语言列表在awesome-wasm-langs中,以及有关WebAssembly网页WebAssembly概念的更多信息。

在浏览器上运行 (Running go on the browser)

Now, let’s get our hands dirty with some basic WASM and Golang.

现在,让我们动手使用一些基本的WASM和Golang。

编写Go代码 (Writing Go Code)

Let’s write our first hello world program.

让我们编写第一个hello world程序。

// go
package mainimport "fmt"func main() {
fmt.Println("Hi from the browser console!!")
}

编译为WebAssembly (Compiling to WebAssembly)

Let’s compile it to Wasm.

让我们将其编译为Wasm。

#sh
GOOS=js GOARCH=wasm go build -o main.wasm main.go

This will create a main.wasm WebAssembly file that we can import and run on the browser.

这将创建一个main.wasm WebAssembly文件,我们可以将其导入并在浏览器上运行。

与javascript集成 (Integrating with javascript)

After we write our Go code and compile it to WASM we can then start integrating it on the browser.

编写Go代码并将其编译为WASM之后,我们可以开始将其集成到浏览器中。

We will need a Go runtime wrapper written in javascript to interact with Go through wasm. The code is shipped with Go 1.11+ and can be copied using the following command:

我们将需要一个用JavaScript编写的Go运行时包装程序,以通过wasm与Go进行交互。 该代码随Go 1.11+一起提供,可以使用以下命令进行复制:

#sh
cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" .

Now, let’s integrate it into the browser.

现在,让我们将其集成到浏览器中。

<!-- html -->
<html>
<head>
<meta charset="utf-8" />
<script src="wasm_exec.js"></script>
<scrip
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值