Chu Phúc Bền git-thinh

## README.md

      
              7 files
            
          
              0 forks
            
          
                0 comments
              
            
              0 stars
            
          
                git-thinh
                / README.md
            
            
              Created
              June 6, 2024 10:16
                — forked from veltman/README.md
            
              
                Gif rendering - SVG to GIF
              
          
    Testing in-browser gif generation from an SVG with gif.js.  Works in recent Chrome/Safari/Firefox.
Process:

Create a standard SVG line chart.
Step through in-between frames of the line chart: for each one, update the SVG, render to an image, add the image element to a stack of gif frames.
Render frames together in the background using gif.js web workers.
When rendering's complete, add the blob URL as an image and start the SVG on an infinite loop with d3.timer (gratuitous).

See also: Gif Globe, Gif New Jersey

  
## README.md

      
              2 files
            
          
              0 forks
            
          
                0 comments
              
            
              0 stars
            
          
                git-thinh
                / README.md
            
            
              Created
              June 6, 2024 10:41
                — forked from ilblog/README.md
            
              
                Create mp4 video from set of images in the browser client side, using ffmpeg.js in worker thread
              
          
    Inspiration


https://semisignal.com/tag/ffmpeg-js/
https://github.com/antimatter15/whammy

ffmeg as worker can be found at https://github.com/Kagami/ffmpeg.js/
Final build can be obtained via wget https://unpkg.com/ffmpeg.js@3.1.9001/ffmpeg-worker-mp4.js

  
## pdf2img.html
<html>
<body>
  <script type="text/javascript" src="//mozilla.github.io/pdf.js/build/pdf.js"></script>
  <script type="text/javascript">
var url = "https://docs.google.com/document/export?format=pdf&id=1ML11ZyyMpnAr6clIAwWrXD53pQgNR-DppMYwt9XvE6s&token=AC4w5Vg7fSWH1Hq0SgNckx4YCvnGPaScyw%3A1423618416864";

var pages = [], heights = [], width = 0, height = 0, currentPage = 1;
var scale = 1.5;

function draw() {

## pdf2img.html
<html>
<body>
  <script type="text/javascript" src="//mozilla.github.io/pdf.js/build/pdf.js"></script>
  <script type="text/javascript">
var url = "https://docs.google.com/document/export?format=pdf&id=1ML11ZyyMpnAr6clIAwWrXD53pQgNR-DppMYwt9XvE6s&token=AC4w5Vg7fSWH1Hq0SgNckx4YCvnGPaScyw%3A1423618416864";

var pages = [], heights = [], width = 0, height = 0, currentPage = 1;
var scale = 1.5;

function draw() {

## cloudflareworker-verifyjwt.js
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

// Following code is a modified version of that found at https://blog.cloudflare.com/dronedeploy-and-cloudflare-workers/

/**
 * Fetch and log a request
 * @param {Request} request
 */

## background.js
/* global chrome, MediaRecorder, FileReader */

chrome.runtime.onConnect.addListener(port => {
  let recorder = null
  port.onMessage.addListener(msg => {
    console.log(msg);
    switch (msg.type) {
      case 'REC_STOP':
        console.log('Stopping recording')
        if (!port.recorderPlaying || !recorder) {

## alpine-modal.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Alpine.js Modal Dialog</title>
    <style>
      [x-cloak] {
        display: none !important;
      }

## static_server.js
var http = require("http"),
    url = require("url"),
    path = require("path"),
    fs = require("fs")
    port = process.argv[2] || 8888,
    mimeTypes = {
      "html": "text/html",
      "jpeg": "image/jpeg",
      "jpg": "image/jpeg",
      "png": "image/png",

## server-route.js
// A BASIC Node server
// Routing Requests

const http = require("http");
const url = require("url");

const server = http.createServer(function(req, res) {
  //console.log(req.url);
  let parsedURL = url.parse(req.url, true);
  let path = parsedURL.pathname;

## index.html
<!doctype html>
<meta charset="utf-8">
<title>Render the text of a PDF with PDF.js</title>

<style>
.page-container {
  box-shadow: 0 1px 3px #444;
  position: relative;
  font-size: 1px;
  line-height: 1;
	<html>
	<body>
	<script type="text/javascript" src="//mozilla.github.io/pdf.js/build/pdf.js"></script>
	<script type="text/javascript">
	var url = "https://docs.google.com/document/export?format=pdf&id=1ML11ZyyMpnAr6clIAwWrXD53pQgNR-DppMYwt9XvE6s&token=AC4w5Vg7fSWH1Hq0SgNckx4YCvnGPaScyw%3A1423618416864";

	var pages = [], heights = [], width = 0, height = 0, currentPage = 1;
	var scale = 1.5;

	function draw() {
	addEventListener('fetch', event => {
	event.respondWith(handleRequest(event.request))
	})

	// Following code is a modified version of that found at https://blog.cloudflare.com/dronedeploy-and-cloudflare-workers/

	/**
	* Fetch and log a request
	* @param {Request} request
	*/
	/* global chrome, MediaRecorder, FileReader */

	chrome.runtime.onConnect.addListener(port => {
	let recorder = null
	port.onMessage.addListener(msg => {
	console.log(msg);
	switch (msg.type) {
	case 'REC_STOP':
	console.log('Stopping recording')
	if (!port.recorderPlaying \|\| !recorder) {
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>Alpine.js Modal Dialog</title>
	<style>
	[x-cloak] {
	display: none !important;
	}
	var http = require("http"),
	url = require("url"),
	path = require("path"),
	fs = require("fs")
	port = process.argv[2] \|\| 8888,
	mimeTypes = {
	"html": "text/html",
	"jpeg": "image/jpeg",
	"jpg": "image/jpeg",
	"png": "image/png",
	// A BASIC Node server
	// Routing Requests

	const http = require("http");
	const url = require("url");

	const server = http.createServer(function(req, res) {
	//console.log(req.url);
	let parsedURL = url.parse(req.url, true);
	let path = parsedURL.pathname;
	<!doctype html>
	<meta charset="utf-8">
	<title>Render the text of a PDF with PDF.js</title>

	<style>
	.page-container {
	box-shadow: 0 1px 3px #444;
	position: relative;
	font-size: 1px;
	line-height: 1;