如何使用球拍在網絡應用程序中繪製圖片？

Question

我正在尋找一種在簡單的網絡應用程序中繪製圖片的方式。基本上我試圖提交使用標準幻燈片庫的圓形圖片，但它不起作用，我不知道爲什麼。

這裏有一個例子：

#lang web-server/insta 

(require slideshow) 

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

你能告訴我一個提示，我怎麼能畫使用標準utils的在我的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))))]))))))))