Как визуализировать/показывать изображения в HTML, созданные на лету с помощью Golang и gin-gonic

Я генерирую коды 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, а также сам метод Encode говорит "To serve over HTTP, remember to send a Content-Type: image/png header."

Как я могу правильно установить тип контента в запросе, используя gingonic, и как правильно декодировать в HTML?


person kike    schedule 13.07.2019    source источник


Ответы (1)


Я решил свой вопрос благодаря этой статье: https://www.socketloop.com/tutorials/golang-encode-image-to-base64-example

Проблема в том, что мне нужно было закодировать его в строку с помощью '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")
}

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>
person kike    schedule 13.07.2019