为了账号安全,请及时绑定邮箱和手机立即绑定

如何使用 Golang 和 gin-gonic 在 HTML 中渲染/显示动态创建的图像

如何使用 Golang 和 gin-gonic 在 HTML 中渲染/显示动态创建的图像

Go
交互式爱情 2023-07-04 14:47:43
我正在生成QR代码,然后我需要在HTML不将它们保存为图像的情况下显示它们。到目前为止,我可以生成它们,但在渲染它们时遇到问题HTML我这里有golang生成的代码QR和HTML尝试渲染它们的模板戈兰import (    "fmt"    "github.com/gin-gonic/gin"    qrcode "github.com/skip2/go-qrcode")func renderQRExport(c *gin.Context){    var images [][]byte    var img []byte    var err error    for i := 0; i < 25; i++ {        img, err = qrcode.Encode("https://example.org", qrcode.Medium, 256)        images = append(images, img)        if err != nil {            fmt.Print(err)        }    }    render(c, gin.H{        "images":              images,    }, "qr.html")}HTML模板<!doctype html><html class="no-js" lang=""><head>  <title>QR export</title>  {{template "imports.html"}}</head><body>  <div class="margin-body-log-in-worker">        <div class="row">          {{range .images}}          <div class="col-4 col-sm-4 col-md-3 col-xl-2 center">                <img src="data:image/png;base64,{{.image}}" class="img-fluid image-dashboard" />          </div>          {{end}}        </div>      </div></body></html>正如他们在本文中所说,我无法做的事情之一: https://www.sanarias.com/blog/1214PlayingwithimagesinHTTPresponseingolang 编码方法本身也说"To serve over HTTP, remember to send a Content-Type: image/png header."如何正确设置请求中的内容类型gingonic以及如何在 中正确解码HTML?
查看完整描述

1 回答

?
qq_花开花谢_0

TA贡献1835条经验 获得超7个赞

问题是我需要用 'imgBase64Str := base64.StdEncoding.EncodeToString(buf)' 将其编码为字符串

所以最终的工作代码如下:

戈兰

func renderQRExport(c *gin.Context){

    var images []string

    var img []byte

    var err error

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

        img, err = qrcode.Encode("https://example.org", qrcode.Medium, 256)

        img2 := base64.StdEncoding.EncodeToString(img)

        images = append(images, img2)

        if err != nil {

            fmt.Print(err)

        }

    }

    render(c, gin.H{

        "images":              images,

    }, "qr.html")

}

超文本标记语言


<!doctype html>

<html class="no-js" lang="">

<head>

  <title>QR export</title>

  {{template "imports.html"}}

</head>

<body>

  <div class="margin-body-log-in-worker">

        <div class="row">

          {{range .images}}

          <div class="col-4 col-sm-4 col-md-3 col-xl-2 center">

                <img src="data:image/png;base64,{{.}}" class="img-fluid image-dashboard" />

          </div>

          {{end}}

        </div>

      </div>

</body>

</html>


查看完整回答
反对 回复 2023-07-04
  • 1 回答
  • 0 关注
  • 152 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信