Question

我正在寻找一种在我简单的网络应用中绘制图片的方法。基本上我是尝试使用标准幻灯片库提交圆圈图片，但它不起作用，我不明白为什么。

以下是一个示例：

#lang web-server/insta

(require slideshow)

(define (start request)
  (response/xexpr '(html
                     (body (circle 10))
                     )
  )
)

你能否告诉我一个提示如何在HTML页面上使用标准工具画画？

Answer 1

您需要为图像生成HTML IMG标记并提供正确的内容。一种方法是将图像源直接放在网页中作为data uri来源：

#lang web-server/insta
(require pict
         net/base64
         file/convertible)

;; pict->data-uri : Pict -> String
(define (pict->data-uri pict)
  (format "data:image/png;base64,~a"
          (base64-encode (convert pict 'png-bytes))))

;; start : Request -> Response
(define (start request)
  (send/suspend/dispatch
   (lambda (make-url)
     (response/xexpr
      `(html
        (body
         (p "hello, here's a circle:")
         (img ([src ,(pict->data-uri (circle 10))]))))))))

另一种方法是使图像源成为一个将发送图像作为响应的URL：

#lang web-server/insta
(require pict
         file/convertible)

;; pict-response : Pict -> Response
(define (pict-response pict)
  (response/full 200 #"Ok"
                 (current-seconds) #"image/png"
                 (list)
                 (list (convert pict 'png-bytes))))

;; start : Request -> Response
(define (start request)
  (send/suspend/dispatch
   (lambda (make-url)
     (response/xexpr
      `(html
        (body
         (p "hello, here's a circle:")
         (img ([src ,(make-url
                      (lambda (req)
                        (pict-response (circle 10))))]))))))))

如何使用Racket在Web应用程序中绘制图片？

1 个答案: