@napi-rs/canvas 0.1.12 → 0.1.17

package/CHANGELOG.md

@@ -1,3 +1,44 @@
+## [0.1.17](https://github.com/Brooooooklyn/canvas/compare/v0.1.16...v0.1.17) (2021-12-12)
+
+## [0.1.16](https://github.com/Brooooooklyn/canvas/compare/v0.1.15...v0.1.16) (2021-12-12)
+
+### Bug Fixes
+
+- make methods on ctx configurable & writable ([affe82d](https://github.com/Brooooooklyn/canvas/commit/affe82d0b8880441737497403d790f4d39a217c3))
+
+### Features
+
+- chrome/m97 ([66c900f](https://github.com/Brooooooklyn/canvas/commit/66c900f4307f8204b55912659874a83513220460))
+
+## [0.1.15](https://github.com/Brooooooklyn/canvas/compare/v0.1.14...v0.1.15) (2021-11-11)
+
+### Bug Fixes
+
+- `vercel/nft` and `webpack` compatible issue ([f2e23f5](https://github.com/Brooooooklyn/canvas/commit/f2e23f5d763795c1e499e1eda5b70078a6de501a))
+
+## [0.1.14](https://github.com/Brooooooklyn/canvas/compare/v0.1.13...v0.1.14) (2021-10-26)
+
+### Bug Fixes
+
+- Now generating avif images is 10x+ faster. ([407d1d1](https://github.com/Brooooooklyn/canvas/commit/407d1d1f09dce622426b71ee800480534c8e0888))
+- Use different quality for WebP and JPEG formats, which is more in line with the browser's default values. ([fdefa5d](https://github.com/Brooooooklyn/canvas/commit/fdefa5dd278fcc911cb74524388ec7960d9cd1f6))
+
+### Features
+
+- The option to generate avif removes alphaQuality and calculates it internally. ([8de6e95](https://github.com/Brooooooklyn/canvas/commit/8de6e95d23383897870c66e59698a71cd0e73631))
+- Add a new SVG generation avif example. ([04d401a](https://github.com/Brooooooklyn/canvas/commit/04d401aaf3d35d13223e32af9e13b829f13170fc))
+
+## [0.1.13](https://github.com/Brooooooklyn/canvas/compare/v0.1.12...v0.1.13) (2021-10-20)
+
+### Bug Fixes
+
+- text align position ([435e102](https://github.com/Brooooooklyn/canvas/commit/435e102e526e206a89f6a1bae2e9f8a1d1646b9f))
+
+### Features
+
+- update rust toolchain ([1cda93b](https://github.com/Brooooooklyn/canvas/commit/1cda93b9ade402893ca1e192a35522eb5b13190a))
+- upgrade to chrome/m96 ([a7b3ffe](https://github.com/Brooooooklyn/canvas/commit/a7b3ffe68e4125e2ab63e42c09409cd9cc49dc9f))
+
 ## [0.1.12](https://github.com/Brooooooklyn/canvas/compare/v0.1.11...v0.1.12) (2021-10-15)
 
 ### Features

package/README.md

@@ -1,7 +1,7 @@
 # `skr canvas`
 
 ![CI](https://github.com/Brooooooklyn/canvas/workflows/CI/badge.svg)
-![Skia Version](https://img.shields.io/badge/Skia-chrome%2Fm95-hotpink)
+![Skia Version](https://img.shields.io/badge/Skia-chrome%2Fm97-hotpink)
 [![install size](https://packagephobia.com/badge?p=@napi-rs/canvas)](https://packagephobia.com/result?p=@napi-rs/canvas)
 [![Downloads](https://img.shields.io/npm/dm/@napi-rs/canvas.svg?sanitize=true)](https://npmcharts.com/compare/@napi-rs/canvas?minimal=true)
 
@@ -298,7 +298,15 @@ path.simplify().toSVGString()
 
 > The tiger.json was serialized from [gojs/samples/tiger](https://github.com/NorthwoodsSoftware/GoJS/blob/master/samples/tiger.html)
 
-![](./example/tiger.png)
+<img width="500" src="example/tiger.png">
+
+```shell
+node example/anime-girl.js
+```
+
+| SVG                                            | PNG                                            |
+| ---------------------------------------------- | ---------------------------------------------- |
+| <img width="500" src="example/anime-girl.svg"> | <img width="500" src="example/anime-girl.png"> |
 
 # Building
 

package/index.d.ts

@@ -298,7 +298,6 @@ export interface SvgCanvas {
 
 export interface AvifConfig {
   quality?: number
-  alphaQuality?: number
   speed?: number
   threads?: number
 }

package/index.js

@@ -1,16 +1,6 @@
 const { platform, homedir } = require('os')
 const { join } = require('path')
 
-const { loadBinding } = require('@node-rs/helper')
-
-/**
- * __dirname means load native addon from current dir
- * 'skia' means native addon name is `skia`
- * the first arguments was decided by `napi.name` field in `package.json`
- * the second arguments was decided by `name` field in `package.json`
- * loadBinding helper will load `skia.[PLATFORM].node` from `__dirname` first
- * If failed to load addon, it will fallback to load from `@napi-rs/skia-[PLATFORM]`
- */
 const {
   CanvasRenderingContext2D,
   CanvasElement,
@@ -22,9 +12,9 @@ const {
   CanvasPattern,
   GlobalFonts,
   convertSVGTextToPath: _convertSVGTextToPath,
-} = loadBinding(__dirname, 'skia', '@napi-rs/canvas')
+} = require('./js-binding')
 
-const Geometry = require('./geometry')
+const { DOMPoint, DOMMatrix, DOMRect } = require('./geometry')
 
 const StrokeJoin = {
   Miter: 0,
@@ -197,9 +187,9 @@ function createCanvas(width, height, flag) {
         }
         return new ImageData(widthOrImage, height, { colorSpace: 'srgb', ...attrs })
       },
-      configurable: false,
+      configurable: true,
       enumerable: false,
-      writable: false,
+      writable: true,
     })
 
     Object.defineProperty(canvasElement, 'ctx', {
@@ -221,16 +211,28 @@ function createCanvas(width, height, flag) {
     toDataURLAsync: canvasToDataURLAsync,
   } = Object.getPrototypeOf(canvasElement)
 
+  // See also: https://github.com/kornelski/cavif-rs#usage
+  const avifDefaultQuality = 80
+  const avifConfig = {
+    // Quality from 1 (worst) to 100 (best), the default value is 80. The numbers have different meaning than JPEG's quality scale. Beware when comparing codecs. There is no lossless compression support.
+    quality: avifDefaultQuality,
+
+    // Calculate alphaQuality, this is consistent with cavif.
+    // https://github.com/kornelski/cavif-rs/blob/37847b95bb81d4cf90e36b7fab2c7fbbcf95abe2/src/main.rs#L97
+    alphaQuality: Math.min((avifDefaultQuality + 100) / 2, avifDefaultQuality + avifDefaultQuality / 4 + 2),
+    threads: 0,
+
+    // Encoding speed between 1 (best, but slowest) and 10 (fastest, but a blurry mess), the default value is 4. Speeds 1 and 2 are unbelievably slow, but make files ~3-5% smaller. Speeds 7 and above degrade compression significantly, and are not recommended.
+    speed: 4,
+  }
+
   canvasElement.encode = function encode(type, qualityOrConfig) {
     if (type === 'avif') {
       return canvasEncode.call(
         this,
         type,
         JSON.stringify({
-          quality: 92,
-          alphaQuality: 92,
-          threads: 0,
-          speed: 1,
+          ...avifConfig,
           ...(qualityOrConfig || {}),
         }),
       )
@@ -244,10 +246,7 @@ function createCanvas(width, height, flag) {
         this,
         type,
         JSON.stringify({
-          quality: 92,
-          alphaQuality: 92,
-          threads: 0,
-          speed: 1,
+          ...avifConfig,
           ...(qualityOrConfig || {}),
         }),
       )
@@ -261,10 +260,7 @@ function createCanvas(width, height, flag) {
         this,
         type,
         JSON.stringify({
-          quality: 92,
-          alphaQuality: 92,
-          threads: 0,
-          speed: 1,
+          ...avifConfig,
           ...(qualityOrConfig || {}),
         }),
       )
@@ -278,10 +274,7 @@ function createCanvas(width, height, flag) {
         this,
         type,
         JSON.stringify({
-          quality: 92,
-          alphaQuality: 92,
-          threads: 0,
-          speed: 1,
+          ...avifConfig,
           ...(qualityOrConfig || {}),
         }),
       )
@@ -295,10 +288,7 @@ function createCanvas(width, height, flag) {
         this,
         type,
         JSON.stringify({
-          quality: 92,
-          alphaQuality: 92,
-          threads: 0,
-          speed: 1,
+          ...avifConfig,
           ...(qualityOrConfig || {}),
         }),
       )
@@ -335,7 +325,7 @@ if (!process.env.DISABLE_SYSTEM_FONTS_LOAD) {
 }
 
 function convertSVGTextToPath(input) {
-  return _convertSVGTextToPath(Buffer.from(input), GlobalFontsSingleton)
+  return _convertSVGTextToPath(Buffer.isBuffer(input) ? input : Buffer.from(input), GlobalFontsSingleton)
 }
 
 module.exports = {
@@ -349,7 +339,9 @@ module.exports = {
   StrokeCap,
   StrokeJoin,
   SvgExportFlag,
-  ...Geometry,
   GlobalFonts: GlobalFontsSingleton,
   convertSVGTextToPath,
+  DOMPoint,
+  DOMMatrix,
+  DOMRect,
 }

package/js-binding.js

@@ -0,0 +1,220 @@
+const { existsSync, readFileSync } = require('fs')
+const { join } = require('path')
+
+const { platform, arch } = process
+
+let nativeBinding = null
+let localFileExisted = false
+let isMusl = false
+let loadError = null
+
+switch (platform) {
+  case 'android':
+    if (arch !== 'arm64') {
+      throw new Error(`Unsupported architecture on Android ${arch}`)
+    }
+    localFileExisted = existsSync(join(__dirname, 'skia.android-arm64.node'))
+    try {
+      if (localFileExisted) {
+        nativeBinding = require('./skia.android-arm64.node')
+      } else {
+        nativeBinding = require('@napi-rs/canvas-android-arm64')
+      }
+    } catch (e) {
+      loadError = e
+    }
+    break
+  case 'win32':
+    // eslint-disable-next-line sonarjs/no-nested-switch
+    switch (arch) {
+      case 'x64':
+        localFileExisted = existsSync(join(__dirname, 'skia.win32-x64-msvc.node'))
+        try {
+          if (localFileExisted) {
+            nativeBinding = require('./skia.win32-x64-msvc.node')
+          } else {
+            nativeBinding = require('@napi-rs/canvas-win32-x64-msvc')
+          }
+        } catch (e) {
+          loadError = e
+        }
+        break
+      case 'ia32':
+        localFileExisted = existsSync(join(__dirname, 'skia.win32-ia32-msvc.node'))
+        try {
+          if (localFileExisted) {
+            nativeBinding = require('./skia.win32-ia32-msvc.node')
+          } else {
+            nativeBinding = require('@napi-rs/canvas-win32-ia32-msvc')
+          }
+        } catch (e) {
+          loadError = e
+        }
+        break
+      case 'arm64':
+        localFileExisted = existsSync(join(__dirname, 'skia.win32-arm64-msvc.node'))
+        try {
+          if (localFileExisted) {
+            nativeBinding = require('./skia.win32-arm64-msvc.node')
+          } else {
+            nativeBinding = require('@napi-rs/canvas-win32-arm64-msvc')
+          }
+        } catch (e) {
+          loadError = e
+        }
+        break
+      default:
+        throw new Error(`Unsupported architecture on Windows: ${arch}`)
+    }
+    break
+  case 'darwin':
+    // eslint-disable-next-line sonarjs/no-nested-switch
+    switch (arch) {
+      case 'x64':
+        localFileExisted = existsSync(join(__dirname, 'skia.darwin-x64.node'))
+        try {
+          if (localFileExisted) {
+            nativeBinding = require('./skia.darwin-x64.node')
+          } else {
+            nativeBinding = require('@napi-rs/canvas-darwin-x64')
+          }
+        } catch (e) {
+          loadError = e
+        }
+        break
+      case 'arm64':
+        localFileExisted = existsSync(join(__dirname, 'skia.darwin-arm64.node'))
+        try {
+          if (localFileExisted) {
+            nativeBinding = require('./skia.darwin-arm64.node')
+          } else {
+            nativeBinding = require('@napi-rs/canvas-darwin-arm64')
+          }
+        } catch (e) {
+          loadError = e
+        }
+        break
+      default:
+        throw new Error(`Unsupported architecture on macOS: ${arch}`)
+    }
+    break
+  case 'freebsd':
+    if (arch !== 'x64') {
+      throw new Error(`Unsupported architecture on FreeBSD: ${arch}`)
+    }
+    localFileExisted = existsSync(join(__dirname, 'skia.freebsd-x64.node'))
+    try {
+      if (localFileExisted) {
+        nativeBinding = require('./skia.freebsd-x64.node')
+      } else {
+        nativeBinding = require('@napi-rs/canvas-freebsd-x64')
+      }
+    } catch (e) {
+      loadError = e
+    }
+    break
+  case 'linux':
+    // eslint-disable-next-line sonarjs/no-nested-switch
+    switch (arch) {
+      case 'x64':
+        isMusl = readFileSync('/usr/bin/ldd', 'utf8').includes('musl')
+        if (isMusl) {
+          localFileExisted = existsSync(join(__dirname, 'skia.linux-x64-musl.node'))
+          try {
+            if (localFileExisted) {
+              nativeBinding = require('./skia.linux-x64-musl.node')
+            } else {
+              nativeBinding = require('@napi-rs/canvas-linux-x64-musl')
+            }
+          } catch (e) {
+            loadError = e
+          }
+        } else {
+          localFileExisted = existsSync(join(__dirname, 'skia.linux-x64-gnu.node'))
+          try {
+            if (localFileExisted) {
+              nativeBinding = require('./skia.linux-x64-gnu.node')
+            } else {
+              nativeBinding = require('@napi-rs/canvas-linux-x64-gnu')
+            }
+          } catch (e) {
+            loadError = e
+          }
+        }
+        break
+      case 'arm64':
+        isMusl = readFileSync('/usr/bin/ldd', 'utf8').includes('musl')
+        if (isMusl) {
+          localFileExisted = existsSync(join(__dirname, 'skia.linux-arm64-musl.node'))
+          try {
+            if (localFileExisted) {
+              nativeBinding = require('./skia.linux-arm64-musl.node')
+            } else {
+              nativeBinding = require('@napi-rs/canvas-linux-arm64-musl')
+            }
+          } catch (e) {
+            loadError = e
+          }
+        } else {
+          localFileExisted = existsSync(join(__dirname, 'skia.linux-arm64-gnu.node'))
+          try {
+            if (localFileExisted) {
+              nativeBinding = require('./skia.linux-arm64-gnu.node')
+            } else {
+              nativeBinding = require('@napi-rs/canvas-linux-arm64-gnu')
+            }
+          } catch (e) {
+            loadError = e
+          }
+        }
+        break
+      case 'arm':
+        localFileExisted = existsSync(join(__dirname, 'skia.linux-arm-gnueabihf.node'))
+        try {
+          if (localFileExisted) {
+            nativeBinding = require('./skia.linux-arm-gnueabihf.node')
+          } else {
+            nativeBinding = require('@napi-rs/canvas-linux-arm-gnueabihf')
+          }
+        } catch (e) {
+          loadError = e
+        }
+        break
+      default:
+        throw new Error(`Unsupported architecture on Linux: ${arch}`)
+    }
+    break
+  default:
+    throw new Error(`Unsupported OS: ${platform}, architecture: ${arch}`)
+}
+
+if (!nativeBinding) {
+  if (loadError) {
+    throw loadError
+  }
+  throw new Error(`Failed to load native binding`)
+}
+
+const {
+  CanvasRenderingContext2D,
+  CanvasElement,
+  createContext,
+  SVGCanvas,
+  Path2D,
+  ImageData,
+  Image,
+  CanvasPattern,
+  GlobalFonts,
+  convertSVGTextToPath,
+} = nativeBinding
+
+module.exports.CanvasRenderingContext2D = CanvasRenderingContext2D
+module.exports.CanvasElement = CanvasElement
+module.exports.createContext = createContext
+module.exports.SVGCanvas = SVGCanvas
+module.exports.Path2D = Path2D
+module.exports.ImageData = ImageData
+module.exports.Image = Image
+module.exports.CanvasPattern = CanvasPattern
+module.exports.GlobalFonts = GlobalFonts
+module.exports.convertSVGTextToPath = convertSVGTextToPath

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@napi-rs/canvas",
-  "version": "0.1.12",
+  "version": "0.1.17",
   "description": "Canvas for Node.js with skia backend",
   "main": "index.js",
   "repository": "https://github.com/Brooooooklyn/canvas.git",
@@ -21,7 +21,8 @@
   "files": [
     "index.d.ts",
     "index.js",
-    "geometry.js"
+    "geometry.js",
+    "js-binding.js"
   ],
   "napi": {
     "name": "skia",
@@ -49,12 +50,9 @@
     "bench": "node -r @swc-node/register benchmark/bench.ts",
     "build": "napi build --platform --release",
     "build:debug": "napi build --platform",
-    "format": "run-p format:md format:json format:yaml format:source format:rs",
-    "format:md": "prettier --parser markdown --write ./**/*.md",
-    "format:json": "prettier --parser json --write ./**/*.json",
+    "format": "run-p format:source format:rs",
     "format:rs": "cargo fmt",
-    "format:source": "prettier --config ./package.json --write ./**/*.{js,ts}",
-    "format:yaml": "prettier --parser yaml --write ./**/*.{yml,yaml}",
+    "format:source": "prettier . -w",
     "lint": "eslint . -c ./.eslintrc.yml",
     "prepublishOnly": "pinst --disable && napi prepublish -t npm",
     "postpublish": "pinst --enable",
@@ -66,50 +64,40 @@
     "@jimp/custom": "^0.16.1",
     "@jimp/jpeg": "^0.16.1",
     "@jimp/png": "^0.16.1",
-    "@napi-rs/cli": "^1.3.3",
-    "@octokit/rest": "^18.11.1",
-    "@swc-node/register": "^1.3.5",
-    "@types/lodash": "^4.14.174",
-    "@typescript-eslint/eslint-plugin": "^5.0.0",
-    "@typescript-eslint/parser": "^5.0.0",
+    "@napi-rs/cli": "^1.3.5",
+    "@octokit/rest": "^18.12.0",
+    "@swc-node/register": "^1.4.0",
+    "@types/lodash": "^4.14.178",
+    "@typescript-eslint/eslint-plugin": "^5.6.0",
+    "@typescript-eslint/parser": "^5.6.0",
     "ava": "^3.15.0",
-    "benny": "^3.6.15",
+    "benny": "^3.7.1",
     "canvas": "^2.8.0",
-    "canvaskit-wasm": "^0.30.0",
-    "chalk": "^4.1.2",
+    "canvaskit-wasm": "^0.31.0",
+    "chalk": "4",
     "conventional-changelog-cli": "^2.1.1",
-    "eslint": "^7.32.0",
+    "eslint": "^8.4.1",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-sonarjs": "^0.10.0",
-    "husky": "^7.0.2",
-    "lint-staged": "^11.1.2",
+    "eslint-plugin-sonarjs": "^0.11.0",
+    "husky": "^7.0.4",
+    "lint-staged": "^12.1.2",
     "lodash": "^4.17.21",
     "npm-run-all": "^4.1.5",
     "pinst": "^2.1.6",
     "png.js": "^0.2.1",
-    "prettier": "^2.4.1",
+    "prettier": "^2.5.1",
     "putasset": "^5.0.3",
-    "skia-canvas": "^0.9.25",
-    "typescript": "^4.4.3"
-  },
-  "dependencies": {
-    "@node-rs/helper": "^1.2.1"
+    "skia-canvas": "^0.9.27",
+    "typescript": "^4.5.3"
   },
   "lint-staged": {
+    "*.@(js|ts|tsx|yml|yaml|md|json)": [
+      "prettier --write"
+    ],
     "*.@(js|ts|tsx)": [
-      "prettier --write",
       "eslint -c .eslintrc.yml --fix"
-    ],
-    "*.@(yml|yaml)": [
-      "prettier --parser yaml --write"
-    ],
-    "*.md": [
-      "prettier --parser markdown --write"
-    ],
-    "*.json": [
-      "prettier --parser json --write"
     ]
   },
   "ava": {
@@ -130,18 +118,17 @@
     "semi": false,
     "trailingComma": "all",
     "singleQuote": true,
-    "arrowParens": "always",
-    "parser": "typescript"
+    "arrowParens": "always"
   },
   "optionalDependencies": {
-    "@napi-rs/canvas-win32-x64-msvc": "0.1.12",
-    "@napi-rs/canvas-darwin-x64": "0.1.12",
-    "@napi-rs/canvas-linux-x64-gnu": "0.1.12",
-    "@napi-rs/canvas-linux-arm-gnueabihf": "0.1.12",
-    "@napi-rs/canvas-linux-x64-musl": "0.1.12",
-    "@napi-rs/canvas-linux-arm64-gnu": "0.1.12",
-    "@napi-rs/canvas-linux-arm64-musl": "0.1.12",
-    "@napi-rs/canvas-darwin-arm64": "0.1.12",
-    "@napi-rs/canvas-android-arm64": "0.1.12"
+    "@napi-rs/canvas-win32-x64-msvc": "0.1.17",
+    "@napi-rs/canvas-darwin-x64": "0.1.17",
+    "@napi-rs/canvas-linux-x64-gnu": "0.1.17",
+    "@napi-rs/canvas-linux-arm-gnueabihf": "0.1.17",
+    "@napi-rs/canvas-linux-x64-musl": "0.1.17",
+    "@napi-rs/canvas-linux-arm64-gnu": "0.1.17",
+    "@napi-rs/canvas-linux-arm64-musl": "0.1.17",
+    "@napi-rs/canvas-darwin-arm64": "0.1.17",
+    "@napi-rs/canvas-android-arm64": "0.1.17"
   }
 }