1

I'm looking for a way of drawing a pictures in my simple web-app. Basically I'm trying to submit a picture of circle using standard slideshow library, but it doesn't work and I have no idea why.

Here is a sample:

#lang web-server/insta

(require slideshow)

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

Could you tell me a hint how can I draw pictures using standard utils at my HTML page?

soegaard
  • 30,661
  • 4
  • 57
  • 106
Dimitry
  • 11
  • 3

1 Answers1

2

You need to produce an HTML IMG tag for the image and provide the right contents. One way is to put the image source in the web page directly as a data uri source:

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

Another way is to make the image source a url that will send the image as its response:

#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))))]))))))))
Ryan Culpepper
  • 10,495
  • 4
  • 31
  • 30
  • thanks for your answer, but can i use multi argument procedure for drawing picture? It seems like a problem in case (circle 20 "solid" "blue") – Dimitry Jul 04 '17 at 15:59
  • @Dimitry, the `circle` function from the `pict` library is different from the one from `2htdp/image`. The code for a solid blue circle using the `pict` library is `(colorize (disk 20) "blue")`. Or you could replace the require line for `pict` with `2hdp/image`, since that library's images are also convertible to PNG bytes. You can even use the two libraries together, since the `pict` library functions can generally accept `2htdp/image` images as arguments (but not the other way around, as far as I know). You would need to use something like `prefix-in` to handle name conflicts. – Ryan Culpepper Jul 05 '17 at 18:00
  • thank you for explanation. I've made a fix and it works well – Dimitry Jul 06 '17 at 13:44