如何使用球拍在网络应用程序中绘制图片？

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))))]))))))))