feat: raster support

Dockerfile

@@ -56,7 +56,7 @@ COPY package.json yarn.lock /app/
 RUN yarn --production
 
 COPY --from=html2svg-js /app/build /app/build
-COPY --from=html2svg-binaries /runtime /runtime
+COPY --from=html2svg-binaries /runtime /app/build/runtime
 COPY /scripts/docker-entrypoint.sh /app/scripts/docker-entrypoint.sh
 
 ENTRYPOINT ["/app/scripts/docker-entrypoint.sh"]

readme.md

@@ -1,18 +1,20 @@
 # `html2svg`
 
-Convert HTML and `<canvas>` to SVG or PDF using Chromium. [Read the blog post](https://fathy.fr/html2svg).
+Convert HTML and `<canvas>` to vector (SVG, PDF) or bitmap (PNG, JPEG, WebP) images using Chromium. [Read the blog post](https://fathy.fr/html2svg).
 
 ## Usage
 
 ```shell
-# export to SVG
+# Export to SVG
 $ docker run fathyb/html2svg https://google.com > google.svg
 $ docker run fathyb/html2svg https://google.com --format svg > google.svg
-# export to PDF
+# Export to PDF
 $ docker run fathyb/html2svg https://google.com --format pdf > google.pdf
-# show help
+# Export to PNG
+$ docker run fathyb/html2svg https://google.com --format png > google.png
+# Display help
 $ docker run fathyb/html2svg --help
-Usage: html2svg [options] <url>
+Usage: html2svg [options] [command] <url>
 
 Arguments:
   url                    URL to the web page to render
@@ -22,8 +24,36 @@ Options:
   -w, --wait <seconds>   set the amount of seconds to wait between the page loaded event and taking the screenshot (default: 1)
   -w, --width <width>    set the viewport width in pixels (default: 1920)
   -h, --height <height>  set the viewport height in pixels (default: 1080)
-  -f, --format <format>  set the output format, should one of these values: svg, pdf (default: "svg")
+  -f, --format <format>  set the output format, should one of these values: svg, pdf, png, jpg, webp (default: "svg")
   --help                 display help for command
+
+Commands:
+  serve [options]
+```
+
+### Server
+
+An HTTP server is also provided, all CLI options are supported:
+
+```shell
+# Start a server on port 8080
+$ docker run -p 8080:8080 fathyb/html2svg serve
+# Export to SVG
+$ curl -d http://google.fr http://localhost:8080 > google.svg
+$ curl -d '{"url": "http://google.fr", "format": "svg"}' http://localhost:8080 > google.svg
+# Export to PDF
+$ curl -d '{"url": "http://google.fr", "format": "pdf"}' http://localhost:8080 > google.pdf
+# Export to PNG
+$ curl -d '{"url": "http://google.fr", "format": "png"}' http://localhost:8080 > google.png
+# Display help
+$ docker run fathyb/html2svg serve --help
+Usage: html2svg serve [options]
+
+Options:
+  -H, --host <hostname>  set the hostname to listen on (default: "localhost")
+  -p, --port <hostname>  set the port to listen on (default: 8080)
+  -u, --unix <path>      set the unix socket to listen on
+  -h, --help             display help for command
 ```
 
 ## Development

scripts/docker-entrypoint.sh

@@ -5,5 +5,4 @@ set -e
 export DISPLAY=:99
 
 Xvfb $DISPLAY -screen 0 1920x1080x24 &
-/runtime/electron --no-sandbox --headless --disable-audio-output --mute-audio --force-color-profile=srgb --disable-dev-shm-usage /app/build/html2svg.js "$@"
-
+node /app/build/html2svg.cli.js "$@"

src/chromium.patch

@@ -1,76 +1,31 @@
 diff --git a/content/renderer/render_frame_impl.cc b/content/renderer/render_frame_impl.cc
-index 97cf24ad5f4a6..ab3f90752b11a 100644
+index 97cf24ad5f4a6..ce12415534d20 100644
 --- a/content/renderer/render_frame_impl.cc
 +++ b/content/renderer/render_frame_impl.cc
-@@ -256,6 +256,15 @@
+@@ -256,6 +256,18 @@
  #include "content/renderer/java/gin_java_bridge_dispatcher.h"
  #endif
 
 +// html2svg includes
++#include <stdlib.h>
 +#include <iostream>
 +#include "cc/paint/paint_recorder.h"
 +#include "cc/paint/skia_paint_canvas.h"
++#include "third_party/skia/include/core/SkEncodedImageFormat.h"
 +#include "third_party/skia/include/core/SkStream.h"
++#include "third_party/skia/include/core/SkSurface.h"
 +#include "third_party/skia/include/docs/SkPDFDocument.h"
 +#include "third_party/skia/include/svg/SkSVGCanvas.h"
 +#include "third_party/skia/include/svg/SkSVGCanvas.h"
 +
  using base::Time;
  using blink::ContextMenuData;
  using blink::WebContentDecryptionModule;
-@@ -3822,6 +3831,135 @@ void RenderFrameImpl::DidClearWindowObject() {
+@@ -3822,6 +3834,126 @@ void RenderFrameImpl::DidClearWindowObject() {
 
    for (auto& observer : observers_)
      observer.DidClearWindowObject();
 +
-+  // A Skia stream writing to stdout
-+  class StdoutStream : public SkWStream {
-+  public:
-+    ~StdoutStream() override {
-+      flush();
-+      
-+      delete[] fBytes;
-+    }
-+    
-+    bool write(const void* data, size_t size) override {
-+      auto* buffer = static_cast<const char*>(data);
-+      size_t remaining = size;
-+      size_t bufferSize = 8 * 1024;
-+
-+      while (remaining != 0) {
-+        ssize_t length = std::min(bufferSize - fBytesBuffered, remaining);
-+
-+        std::memcpy(&fBytes[fBytesBuffered], &buffer[size - remaining], length);
-+
-+        remaining -= length;
-+        fBytesWritten += length;
-+        fBytesBuffered += length;
-+
-+        if (fBytesBuffered == bufferSize) {
-+          flush();
-+        }
-+      }
-+
-+      return true;
-+    }
-+    
-+    void flush() override {
-+      if (::write(1, fBytes, fBytesBuffered) != -1) {
-+        fBytesBuffered = 0;
-+        fflush(stdout);
-+      }
-+    }
-+    
-+    size_t bytesWritten() const override {
-+      return fBytesWritten;
-+    }
-+  
-+  private:
-+    char* fBytes = new char[8 * 1024];
-+    size_t fBytesWritten = 0;
-+    size_t fBytesBuffered = 0;
-+  };
-+
 +  // Get access to the JS VM for this process (each tab is a process)
 +  v8::Isolate *isolate = blink::MainThreadIsolate();
 +  // Auto-clean v8 handles
@@ -114,11 +69,12 @@ index 97cf24ad5f4a6..ab3f90752b11a 100644
 +        );
 +
 +        // Create a memory stream to save the SVG content
-+        StdoutStream stream;
++        SkDynamicMemoryWStream stream;
 +        // Get the recording data
 +        auto picture = recorder.finishRecordingAsPicture();
++        auto mode = args[1]->ToUint32(context).ToLocalChecked()->Value();
 +
-+        switch(args[1]->ToUint32(context).ToLocalChecked()->Value()) {
++        switch(mode) {
 +          // SVG
 +          case 0: {
 +            picture->Playback(SkSVGCanvas::Make(rect, &stream).get());
@@ -141,16 +97,54 @@ index 97cf24ad5f4a6..ab3f90752b11a 100644
 +
 +            break;
 +          }
++          default: {
++            auto surface = SkSurface::MakeRasterN32Premul(width, height);
++
++            picture->Playback(surface->getCanvas());
++
++            auto img = surface->makeImageSnapshot();
++
++            assert(img != nullptr);
++
++            auto result = img->encodeToData(
++              [mode]() -> SkEncodedImageFormat {
++                switch(mode) {
++                  case 3:
++                    return SkEncodedImageFormat::kJPEG;
++                  case 4:
++                    return SkEncodedImageFormat::kWEBP;
++                  default:
++                    return SkEncodedImageFormat::kPNG;
++                }
++              }(),
++              100
++            );
++
++            assert(result != nullptr);
++
++            stream.write(result->data(), result->size());
++
++            break;
++          }
 +        }
++
++        auto buffer = v8::ArrayBuffer::New(isolate, stream.bytesWritten());
++
++        stream.copyTo(buffer->Data());
++        args.GetReturnValue().Set(buffer);
 +      }
 +  );
 +
 +  // Register the function as "getPageContentsAsSVG"
 +  global->Set(
-+      context,
-+      v8::String::NewFromUtf8(isolate, "getPageContentsAsSVG").ToLocalChecked(),
-+      fn->GetFunction(context).ToLocalChecked()
++    context,
++    v8::String::NewFromUtf8(isolate, "getPageContentsAsSVG").ToLocalChecked(),
++    fn->GetFunction(context).ToLocalChecked()
 +  ).Check();
++
++  if (command_line.HasSwitch("html2svg-svg-mode")) {
++    setenv("html2svg_svg_mode", "true", 1);
++  }
  }
 
  void RenderFrameImpl::DidCreateDocumentElement() {