Experiment: svg trace Image data? #104

mrkurt · 2018-07-06T01:37:54Z

This is a discussion PR. So discuss!

This adds a traceSVG function on the Image object that gives back an SVG string of the traced output. You can also pass posterize to it, just for fun.

This is using an additional Node library, which I don't love. I experimented with some pure JS SVG tracing implementations and couldn't find a good alternative, though. And I looked for a wasm one and couldn't find anything. That said, I'm not offended at how this works either! It's a pretty nice/simple dev facing API.

Here are some examples:

import { Image } from '@fly/image'
const url = "https://raw.githubusercontent.com/superfly/fly/147f2a327dc76ce6cf10c46b7ea1c19a9d8f2d87/v8env_test/fixtures/picture.jpg"

fly.http.respondWith(async function (req) {
  let resp = await fetch(url)
  let body = await resp.arrayBuffer()
  //return resp
  let svg = new Image(body).traceSVG("posterize")

  return new Response(
    `<html><body>${svg}<br><br><img src="${url}"></body></html`,
    {
      headers: { "Content-Type": "text/html" }
    }
  )
})

Trace on a logo:

Posterize on a photo:

mrkurt added the question label Jul 6, 2018

mrkurt added 2 commits September 8, 2018 10:53

Experiment: svg trace Image data

3eb50d8

tests for svg trace/posterize

47385c7

mrkurt force-pushed the traced-svg branch from 2c371dd to 47385c7 Compare September 10, 2018 14:24

longer timeout on posterize test

33be3bd

mrkurt added the rust+v8 label Dec 5, 2018

mrkurt closed this Dec 5, 2018

mrkurt deleted the traced-svg branch June 17, 2020 22:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Experiment: svg trace Image data? #104

Experiment: svg trace Image data? #104

mrkurt commented Jul 6, 2018

Experiment: svg trace Image data? #104

Experiment: svg trace Image data? #104

Conversation

mrkurt commented Jul 6, 2018