From a8c66d4614dda558068c825211e4121bbecaceb6 Mon Sep 17 00:00:00 2001 From: DjDeveloper <43033058+DjDeveloperr@users.noreply.github.com> Date: Tue, 18 Jan 2022 11:05:25 +0530 Subject: [PATCH] feat: support canvas in drawImage and upgrade canvaskit version (#23) * chore: upgrade canvaskit version * feat: support canvas in drawImage --- README.md | 100 +- deps.ts | 8 +- examples/basic.ts | 18 +- examples/chart.js | 76 - examples/deploy.jsx | 52 - examples/image.ts | 46 +- mod.ts | 14 +- src/base64.ts | 50 +- src/canvas.ts | 88 +- src/canvaskit-opt.wasm | Bin 7081322 -> 7117500 bytes src/canvaskit.ts | 28 +- src/color_util.ts | 32 + src/lib.js | 7605 ++++++++++++++++++++-------------------- src/pack_wasm.ts | 16 +- src/types.ts | 3644 +++++++++---------- src/wasm.js | 4 +- 16 files changed, 5908 insertions(+), 5873 deletions(-) delete mode 100644 examples/chart.js delete mode 100644 examples/deploy.jsx diff --git a/README.md b/README.md index cb039a4..a6d9014 100644 --- a/README.md +++ b/README.md @@ -1,45 +1,55 @@ -# deno-canvas - -Canvas API for Deno, ported from -[canvaskit-wasm (Skia)](https://github.com/google/skia/tree/main/modules/canvaskit). - -## Installation - -Import from https://deno.land/x/canvas/mod.ts or just import from raw GitHub -URL, https://raw.githubusercontent.com/DjDeveloperr/deno-canvas/master/mod.ts. - -## Usage - -`mod.ts` provides a default export exposing the complete CanvasKit API, and -other exports from the file are types and utility functions. - -```ts -import { createCanvas } from "https://deno.land/x/canvas/mod.ts"; -import { serve } from "https://deno.land/std/http/server.ts"; - -const canvas = createCanvas(200, 200); -const ctx = canvas.getContext("2d"); - -ctx.fillStyle = "red"; -ctx.fillRect(10, 10, 200 - 20, 200 - 20); - -await Deno.writeFile("image.png", canvas.toBuffer()); -``` - -And run with `deno run --allow-write filename.ts`. - -You can also try this HTTP server example, -https://raw.githubusercontent.com/DjDeveloperr/deno-canvas/master/examples/square.ts - -For using images, use `loadImage` method exported from `mod.ts`. - -```ts -const image = await loadImage(myURL); -ctx.drawImage(image, x, y); -``` - -## License - -Check [LICENSE](./LICENSE) for more info. - -Copyright 2022 © DjDeveloperr +# deno-canvas + +Canvas API for Deno, ported from +[canvaskit-wasm (Skia)](https://github.com/google/skia/tree/main/modules/canvaskit). + +## Installation + +Import from https://deno.land/x/canvas/mod.ts or just import from raw GitHub +URL, https://raw.githubusercontent.com/DjDeveloperr/deno-canvas/master/mod.ts. + +## Usage + +`mod.ts` provides a default export exposing the complete CanvasKit API, and +other exports from the file are types and utility functions. + +```ts +import { createCanvas } from "https://deno.land/x/canvas/mod.ts"; +import { serve } from "https://deno.land/std/http/server.ts"; + +const canvas = createCanvas(200, 200); +const ctx = canvas.getContext("2d"); + +ctx.fillStyle = "red"; +ctx.fillRect(10, 10, 200 - 20, 200 - 20); + +await Deno.writeFile("image.png", canvas.toBuffer()); +``` + +And run with `deno run --allow-write filename.ts`. + +You can also try this HTTP server example, +https://raw.githubusercontent.com/DjDeveloperr/deno-canvas/master/examples/square.ts + +For using images, use `loadImage` method exported from `mod.ts`. + +```ts +const image = await loadImage(myURL); +ctx.drawImage(image, x, y); +``` + +## Limitations + +[Just like original canvaskit-wasm, the emulated Canvas has some limitations:](https://github.com/google/skia/tree/main/modules/canvaskit/npm_build#known-issues-with-canvas2d-emulation-layer) + +- measureText returns width only and does no shaping. It is only sort of valid + with ASCII letters. +- textAlign is not supported. +- textBaseAlign is not supported. +- fillText does not support the width parameter. + +## License + +Check [LICENSE](./LICENSE) for more info. + +Copyright 2022 © DjDeveloperr diff --git a/deps.ts b/deps.ts index 74325fb..09d32e9 100644 --- a/deps.ts +++ b/deps.ts @@ -1,4 +1,4 @@ -export { - decode, - encode, -} from "https://deno.land/std@0.106.0/encoding/base64.ts"; +export { + decode, + encode, +} from "https://deno.land/std@0.106.0/encoding/base64.ts"; diff --git a/examples/basic.ts b/examples/basic.ts index 8a1219d..4e2366c 100644 --- a/examples/basic.ts +++ b/examples/basic.ts @@ -1,9 +1,9 @@ -import { createCanvas } from "../mod.ts"; - -const canvas = createCanvas(200, 200); -const ctx = canvas.getContext("2d"); - -ctx.fillStyle = "hsl(0, 100%, 50%)"; -ctx.fillRect(10, 10, 200 - 20, 200 - 20); - -await Deno.writeFile("image.png", canvas.toBuffer()); +import { createCanvas } from "../mod.ts"; + +const canvas = createCanvas(200, 200); +const ctx = canvas.getContext("2d"); + +ctx.fillStyle = "hsl(0, 100%, 50%)"; +ctx.fillRect(10, 10, 200 - 20, 200 - 20); + +await Deno.writeFile("image.png", canvas.toBuffer()); diff --git a/examples/chart.js b/examples/chart.js deleted file mode 100644 index 05f85d5..0000000 --- a/examples/chart.js +++ /dev/null @@ -1,76 +0,0 @@ -// Just for testing, doesn't work correctly right now. -// This example is by https://github.com/AaronO - -import { createCanvas } from "../mod.ts"; -import * as chartjs from 'https://cdn.skypack.dev/chart.js'; - -function once(f) { - let executed = false; - return () => { - if (executed) return; - executed = true; - f(); - }; -} - -// Init ChartJS globals -const globalInit = once(() => chartjs.Chart.register(...chartjs.registerables)); - -class DenoPlatform extends chartjs.BasePlatform { - acquireContext(canvas, _) { - return canvas.getContext("2d"); - } -} - -export function render(width, height, chartjsConfig, imageType="image/png") { - // Init globals once - globalInit(); - - // Create canvas - const canvas = createCanvas(width, height); - - // Patch options - chartjsConfig.options = chartjsConfig.options || {}; - chartjsConfig.options.responsive = false; - chartjsConfig.options.animation = false; - - const chart = new chartjs.Chart( - canvas, - { - ...chartjsConfig, - platform: DenoPlatform, - }, - ); - - // Do render - chart._initialize(); - chart.update(); - - return canvas.toBuffer(imageType); -} - -const labels = [ - 'January', - 'February', - 'March', - 'April', - 'May', - 'June', -]; - -const data = { - labels: labels, - datasets: [{ - label: 'My First dataset', - backgroundColor: 'rgb(255, 99, 132)', - borderColor: 'rgb(255, 99, 132)', - data: [0, 10, 5, 2, 20, 30, 45], - }] -}; - -const config = { - type: 'line', - data: data, -}; - -await Deno.writeFile('image.png', render(900, 600, config)); diff --git a/examples/deploy.jsx b/examples/deploy.jsx deleted file mode 100644 index 7467949..0000000 --- a/examples/deploy.jsx +++ /dev/null @@ -1,52 +0,0 @@ -// import { createCanvas } from "https://deno.land/x/canvas@v1.2.2/mod.ts"; -import { createCanvas, init } from "../src/canvas.ts"; -import { h } from "https://x.lcas.dev/preact@10.5.12/mod.js"; -import { renderToString } from "https://x.lcas.dev/preact@10.5.12/ssr.js"; - -function App({ color }) { - return ( - -
-Q@3
zbQ@vLGf$US@x#r>GAU%F{>tS~x>fPRFz#69Q1cs83(hFfP%eLEdTDxLdTx4Vs^TA+
z9+>WDt6i2I#SdF^2Jm
z35IciJIOE+EyD~W4S9wUhT&)#Z5V}?SNhlb&F>8b#5ek6o%p5xg}#EntADJo5#7<>
z)<4oeME!yOnf|%{zP?po+_i$gr+=b