@napi-rs/canvas 0.1.29 → 0.1.31

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%2Fm106-hotpink)
+![Skia Version](https://img.shields.io/badge/Skia-chrome%2Fm108-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)
 
@@ -96,7 +96,7 @@ main()
 const { writeFileSync } = require('fs')
 const { join } = require('path')
 
-const { createCanvas, GlobalFonts } = require('../index.js')
+const { createCanvas, GlobalFonts } = require('@napi-rs/canvas')
 
 GlobalFonts.registerFromPath(join(__dirname, '..', 'fonts', 'AppleColorEmoji@2x.ttf'), 'Apple Emoji')
 GlobalFonts.registerFromPath(join(__dirname, '..', '__test__', 'fonts', 'COLRv1.ttf'), 'COLRv1')
@@ -328,7 +328,7 @@ $ node scripts/build-skia.js
 
 # Install NPM packages, build the Node.js addon:
 $ npm install -g yarn
-$ yarn install --mode=skip=build # Here are modules are used for benchmarking and hard to install, you can skip it by specifying `--mode=skip=build`
+$ yarn install --mode=skip-build # Here are modules that are used for benchmarking and are hard to install, you can skip it by specifying `--mode=skip-build`
 $ sudo dnf install clang # https://fedora.pkgs.org/34/fedora-x86_64/clang-12.0.0-0.3.rc1.fc34.x86_64.rpm.html
 $ yarn build
 

package/index.d.ts

@@ -1,5 +1,3 @@
-/// <reference lib="dom" />
-
 // Clear all type of caches in Skia
 export function clearAllCache(): void
 
@@ -250,8 +248,9 @@ export interface StrokeOptions {
 export interface SKRSContext2D
   extends Omit<
     CanvasRenderingContext2D,
-    'drawImage' | 'createPattern' | 'getTransform' | 'drawFocusIfNeeded' | 'scrollPathIntoView'
+    'drawImage' | 'createPattern' | 'getTransform' | 'drawFocusIfNeeded' | 'scrollPathIntoView' | 'canvas'
   > {
+  canvas: Canvas
   /**
    * @param startAngle The angle at which to begin the gradient, in radians. Angle measurements start vertically above the centre and move around clockwise.
    * @param x The x-axis coordinate of the centre of the gradient.
@@ -302,9 +301,58 @@ export interface SvgCanvas {
 }
 
 export interface AvifConfig {
+  /** 0-100 scale, 100 is lossless */
   quality?: number
+  /** 0-100 scale */
+  alphaQuality?: number
+  /** rav1e preset 1 (slow) 10 (fast but crappy), default is 4 */
   speed?: number
+  /** How many threads should be used (0 = match core count) */
   threads?: number
+  /** set to '4:2:0' to use chroma subsampling, default '4:4:4' */
+  chromaSubsampling?: ChromaSubsampling
+}
+/**
+ * https://en.wikipedia.org/wiki/Chroma_subsampling#Types_of_sampling_and_subsampling
+ * https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Video_concepts
+ */
+export enum ChromaSubsampling {
+  /**
+   * Each of the three Y'CbCr components has the same sample rate, thus there is no chroma subsampling. This scheme is sometimes used in high-end film scanners and cinematic post-production.
+   * Note that "4:4:4" may instead be wrongly referring to R'G'B' color space, which implicitly also does not have any chroma subsampling (except in JPEG R'G'B' can be subsampled).
+   * Formats such as HDCAM SR can record 4:4:4 R'G'B' over dual-link HD-SDI.
+   */
+  Yuv444 = 0,
+  /**
+   * The two chroma components are sampled at half the horizontal sample rate of luma: the horizontal chroma resolution is halved. This reduces the bandwidth of an uncompressed video signal by one-third.
+   * Many high-end digital video formats and interfaces use this scheme:
+   * - [AVC-Intra 100](https://en.wikipedia.org/wiki/AVC-Intra)
+   * - [Digital Betacam](https://en.wikipedia.org/wiki/Betacam#Digital_Betacam)
+   * - [Betacam SX](https://en.wikipedia.org/wiki/Betacam#Betacam_SX)
+   * - [DVCPRO50](https://en.wikipedia.org/wiki/DV#DVCPRO) and [DVCPRO HD](https://en.wikipedia.org/wiki/DV#DVCPRO_HD)
+   * - [Digital-S](https://en.wikipedia.org/wiki/Digital-S)
+   * - [CCIR 601](https://en.wikipedia.org/wiki/Rec._601) / [Serial Digital Interface](https://en.wikipedia.org/wiki/Serial_digital_interface) / [D1](https://en.wikipedia.org/wiki/D-1_(Sony))
+   * - [ProRes (HQ, 422, LT, and Proxy)](https://en.wikipedia.org/wiki/Apple_ProRes)
+   * - [XDCAM HD422](https://en.wikipedia.org/wiki/XDCAM)
+   * - [Canon MXF HD422](https://en.wikipedia.org/wiki/Canon_XF-300)
+   */
+  Yuv422 = 1,
+  /**
+   * n 4:2:0, the horizontal sampling is doubled compared to 4:1:1,
+   * but as the **Cb** and **Cr** channels are only sampled on each alternate line in this scheme, the vertical resolution is halved.
+   * The data rate is thus the same.
+   * This fits reasonably well with the PAL color encoding system, since this has only half the vertical chrominance resolution of [NTSC](https://en.wikipedia.org/wiki/NTSC).
+   * It would also fit extremely well with the [SECAM](https://en.wikipedia.org/wiki/SECAM) color encoding system,
+   * since like that format, 4:2:0 only stores and transmits one color channel per line (the other channel being recovered from the previous line).
+   * However, little equipment has actually been produced that outputs a SECAM analogue video signal.
+   * In general, SECAM territories either have to use a PAL-capable display or a [transcoder](https://en.wikipedia.org/wiki/Transcoding) to convert the PAL signal to SECAM for display.
+   */
+  Yuv420 = 2,
+  /**
+   * What if the chroma subsampling model is 4:0:0?
+   * That says to use every pixel of luma data, but that each row has 0 chroma samples applied to it. The resulting image, then, is comprised solely of the luminance data—a greyscale image.
+   */
+  Yuv400 = 3,
 }
 
 export class Canvas {

package/index.js

@@ -6,7 +6,7 @@ const {
   CanvasRenderingContext2D,
   CanvasElement,
   SVGCanvas,
-  Path2D,
+  Path: Path2D,
   ImageData,
   Image,
   CanvasPattern,
@@ -31,68 +31,28 @@ const SvgExportFlag = {
 // eslint-disable-next-line sonarjs/no-unused-collection
 const Fonts = []
 
-Object.defineProperty(GlobalFonts, 'families', {
-  get: function () {
-    return JSON.parse(GlobalFonts.getFamilies())
-  },
-})
+if (!('families' in GlobalFonts)) {
+  Object.defineProperty(GlobalFonts, 'families', {
+    get: function () {
+      return JSON.parse(GlobalFonts.getFamilies())
+    },
+  })
+}
 
-Object.defineProperty(GlobalFonts, 'has', {
-  value: function has(name) {
-    return !!JSON.parse(GlobalFonts.getFamilies()).find(({ family }) => family === name)
-  },
-  configurable: false,
-  enumerable: false,
-  writable: false,
-})
+if (!('has' in GlobalFonts)) {
+  Object.defineProperty(GlobalFonts, 'has', {
+    value: function has(name) {
+      return !!JSON.parse(GlobalFonts.getFamilies()).find(({ family }) => family === name)
+    },
+    configurable: false,
+    enumerable: false,
+    writable: false,
+  })
+}
 
 function createCanvas(width, height, flag) {
   const isSvgBackend = typeof flag !== 'undefined'
-  const canvasElement = isSvgBackend ? new SVGCanvas(width, height, flag) : new CanvasElement(width, height)
-  const {
-    encode: canvasEncode,
-    encodeSync: canvasEncodeSync,
-    toBuffer: canvasToBuffer,
-    toDataURL: canvasToDataURL,
-    toDataURLAsync: canvasToDataURLAsync,
-  } = Object.getPrototypeOf(canvasElement)
-
-  canvasElement.encode = function encode(type, qualityOrConfig = {}) {
-    if (type === 'avif') {
-      return canvasEncode.call(this, type, JSON.stringify(qualityOrConfig))
-    }
-    return canvasEncode.call(this, type, qualityOrConfig)
-  }
-
-  canvasElement.encodeSync = function encodeSync(type, qualityOrConfig = {}) {
-    if (type === 'avif') {
-      return canvasEncodeSync.call(this, type, JSON.stringify(qualityOrConfig))
-    }
-    return canvasEncodeSync.call(this, type, qualityOrConfig)
-  }
-
-  canvasElement.toBuffer = function toBuffer(type = 'image/png', qualityOrConfig = {}) {
-    if (type === 'avif') {
-      return canvasToBuffer.call(this, type, JSON.stringify(qualityOrConfig))
-    }
-    return canvasToBuffer.call(this, type, qualityOrConfig)
-  }
-
-  canvasElement.toDataURL = function toDataURL(type = 'image/png', qualityOrConfig = {}) {
-    if (type === 'avif') {
-      return canvasToDataURL.call(this, type, JSON.stringify(qualityOrConfig))
-    }
-    return canvasToDataURL.call(this, type, qualityOrConfig)
-  }
-
-  canvasElement.toDataURLAsync = function toDataURLAsync(type = 'image/png', qualityOrConfig = {}) {
-    if (type === 'avif') {
-      return canvasToDataURLAsync.call(this, type, JSON.stringify(qualityOrConfig))
-    }
-    return canvasToDataURLAsync.call(this, type, qualityOrConfig)
-  }
-
-  return canvasElement
+  return isSvgBackend ? new SVGCanvas(width, height, flag) : new CanvasElement(width, height)
 }
 
 class Canvas {

package/js-binding.js

@@ -5,27 +5,54 @@ 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'))
+function isMusl() {
+  // For Node 10
+  if (!process.report || typeof process.report.getReport !== 'function') {
     try {
-      if (localFileExisted) {
-        nativeBinding = require('./skia.android-arm64.node')
-      } else {
-        nativeBinding = require('@napi-rs/canvas-android-arm64')
-      }
+      return readFileSync('/usr/bin/ldd', 'utf8').includes('musl')
     } catch (e) {
-      loadError = e
+      return true
+    }
+  } else {
+    const { glibcVersionRuntime } = process.report.getReport().header
+    return !glibcVersionRuntime
+  }
+}
+
+switch (platform) {
+  case 'android':
+    switch (arch) {
+      case 'arm64':
+        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 'arm':
+        localFileExisted = existsSync(join(__dirname, 'skia.android-arm-eabi.node'))
+        try {
+          if (localFileExisted) {
+            nativeBinding = require('./skia.android-arm-eabi.node')
+          } else {
+            nativeBinding = require('@napi-rs/canvas-android-arm-eabi')
+          }
+        } catch (e) {
+          loadError = e
+        }
+        break
+      default:
+        throw new Error(`Unsupported architecture on Android ${arch}`)
     }
     break
   case 'win32':
-    // eslint-disable-next-line sonarjs/no-nested-switch
     switch (arch) {
       case 'x64':
         localFileExisted = existsSync(join(__dirname, 'skia.win32-x64-msvc.node'))
@@ -68,7 +95,6 @@ switch (platform) {
     }
     break
   case 'darwin':
-    // eslint-disable-next-line sonarjs/no-nested-switch
     switch (arch) {
       case 'x64':
         localFileExisted = existsSync(join(__dirname, 'skia.darwin-x64.node'))
@@ -114,11 +140,9 @@ switch (platform) {
     }
     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) {
+        if (isMusl()) {
           localFileExisted = existsSync(join(__dirname, 'skia.linux-x64-musl.node'))
           try {
             if (localFileExisted) {
@@ -143,8 +167,7 @@ switch (platform) {
         }
         break
       case 'arm64':
-        isMusl = readFileSync('/usr/bin/ldd', 'utf8').includes('musl')
-        if (isMusl) {
+        if (isMusl()) {
           localFileExisted = existsSync(join(__dirname, 'skia.linux-arm64-musl.node'))
           try {
             if (localFileExisted) {
@@ -196,33 +219,39 @@ if (!nativeBinding) {
 }
 
 const {
-  clearAllCache,
+  ChromaSubsampling,
+  SvgExportFlag,
   CanvasRenderingContext2D,
-  CanvasElement,
-  SVGCanvas,
-  Path,
+  CanvasGradient,
   ImageData,
   Image,
-  CanvasPattern,
-  GlobalFonts,
-  convertSVGTextToPath,
   PathOp,
   FillType,
-  StrokeJoin,
   StrokeCap,
+  StrokeJoin,
+  Path,
+  CanvasPattern,
+  convertSVGTextToPath,
+  CanvasElement,
+  SVGCanvas,
+  clearAllCache,
+  GlobalFonts,
 } = nativeBinding
 
-module.exports.clearAllCache = clearAllCache
+module.exports.ChromaSubsampling = ChromaSubsampling
+module.exports.SvgExportFlag = SvgExportFlag
 module.exports.CanvasRenderingContext2D = CanvasRenderingContext2D
-module.exports.CanvasElement = CanvasElement
-module.exports.SVGCanvas = SVGCanvas
-module.exports.Path2D = Path
+module.exports.CanvasGradient = CanvasGradient
 module.exports.ImageData = ImageData
 module.exports.Image = Image
-module.exports.CanvasPattern = CanvasPattern
-module.exports.GlobalFonts = GlobalFonts
-module.exports.convertSVGTextToPath = convertSVGTextToPath
 module.exports.PathOp = PathOp
 module.exports.FillType = FillType
-module.exports.StrokeJoin = StrokeJoin
 module.exports.StrokeCap = StrokeCap
+module.exports.StrokeJoin = StrokeJoin
+module.exports.Path = Path
+module.exports.CanvasPattern = CanvasPattern
+module.exports.convertSVGTextToPath = convertSVGTextToPath
+module.exports.CanvasElement = CanvasElement
+module.exports.SVGCanvas = SVGCanvas
+module.exports.clearAllCache = clearAllCache
+module.exports.GlobalFonts = GlobalFonts

package/load-image.js

@@ -32,7 +32,7 @@ module.exports = async function loadImage(source, options = {}) {
   // if source is a string or URL instance
   if (typeof source === 'string' || source instanceof URL) {
     // if the source exists as a file, construct image from that file
-    if (fs.existsSync(source)) {
+    if (await exists(source)) {
       return createImage(await fs.promises.readFile(source), options.alt)
     } else {
       // the source is a remote url here
@@ -60,16 +60,18 @@ function makeRequest(url, resolve, reject, redirectCount, requestOptions) {
   // lazy load the lib
   const lib = isHttps ? (!https ? (https = require('https')) : https) : !http ? (http = require('http')) : http
 
-  lib.get(url, requestOptions || {}, (res) => {
-    const shouldRedirect = REDIRECT_STATUSES.has(res.statusCode) && typeof res.headers.location === 'string'
-    if (shouldRedirect && redirectCount > 0)
-      return makeRequest(new URL(res.headers.location), resolve, reject, redirectCount - 1, requestOptions)
-    if (typeof res.statusCode === 'number' && (res.statusCode < 200 || res.statusCode >= 300)) {
-      return reject(new Error(`remote source rejected with status code ${res.statusCode}`))
-    }
+  lib
+    .get(url, requestOptions || {}, (res) => {
+      const shouldRedirect = REDIRECT_STATUSES.has(res.statusCode) && typeof res.headers.location === 'string'
+      if (shouldRedirect && redirectCount > 0)
+        return makeRequest(new URL(res.headers.location), resolve, reject, redirectCount - 1, requestOptions)
+      if (typeof res.statusCode === 'number' && (res.statusCode < 200 || res.statusCode >= 300)) {
+        return reject(new Error(`remote source rejected with status code ${res.statusCode}`))
+      }
 
-    consumeStream(res).then(resolve, reject)
-  })
+      consumeStream(res).then(resolve, reject)
+    })
+    .on('error', reject)
 }
 
 // use stream/consumers in the future?
@@ -99,3 +101,12 @@ function isBufferLike(src) {
     src instanceof Object.getPrototypeOf(Uint8Array)
   )
 }
+
+async function exists(path) {
+  try {
+    await fs.promises.access(path, fs.constants.F_OK)
+    return true
+  } catch {
+    return false
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@napi-rs/canvas",
-  "version": "0.1.29",
+  "version": "0.1.31",
   "description": "Canvas for Node.js with skia backend",
   "main": "index.js",
   "repository": "https://github.com/Brooooooklyn/canvas.git",
@@ -49,52 +49,54 @@
   "scripts": {
     "artifacts": "napi artifacts",
     "bench": "node -r @swc-node/register benchmark/bench.ts",
-    "build": "napi build --platform --release",
-    "build:debug": "napi build --platform",
+    "build": "napi build --platform --release --js js-binding.js",
+    "build:debug": "napi build --platform --js js-binding.js",
     "format": "run-p format:source format:rs",
     "format:rs": "cargo fmt",
     "format:source": "prettier . -w",
     "lint": "eslint . -c ./.eslintrc.yml",
     "prepublishOnly": "pinst --disable && napi prepublish -t npm",
     "postpublish": "pinst --enable",
+    "test:ci": "ava -c 1",
     "test": "ava",
     "version": "napi version && conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md"
   },
   "devDependencies": {
-    "@jimp/core": "^0.16.1",
-    "@jimp/custom": "^0.16.1",
-    "@jimp/jpeg": "^0.16.1",
-    "@jimp/png": "^0.16.1",
-    "@napi-rs/cli": "^2.11.4",
-    "@octokit/rest": "^19.0.4",
-    "@swc-node/register": "^1.5.1",
-    "@types/lodash": "^4.14.184",
-    "@types/node": "^18.7.13",
-    "@typescript-eslint/eslint-plugin": "^5.35.1",
-    "@typescript-eslint/parser": "^5.35.1",
-    "ava": "^4.3.3",
+    "@jimp/core": "^0.16.2",
+    "@jimp/custom": "^0.16.2",
+    "@jimp/jpeg": "^0.16.2",
+    "@jimp/png": "^0.16.2",
+    "@napi-rs/cli": "^2.14.0",
+    "@octokit/rest": "^19.0.5",
+    "@swc-node/register": "^1.5.4",
+    "@swc/core": "^1.3.24",
+    "@types/lodash": "^4.14.191",
+    "@types/node": "^18.11.18",
+    "@typescript-eslint/eslint-plugin": "^5.47.1",
+    "@typescript-eslint/parser": "^5.47.1",
+    "ava": "^5.1.0",
     "benny": "^3.7.1",
-    "canvas": "^2.9.3",
-    "canvaskit-wasm": "^0.36.1",
+    "canvas": "^2.11.0",
+    "canvaskit-wasm": "^0.37.2",
     "colorette": "^2.0.19",
     "conventional-changelog-cli": "^2.2.2",
-    "echarts": "^5.3.3",
-    "eslint": "^8.22.0",
+    "echarts": "^5.4.1",
+    "eslint": "^8.31.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-sonarjs": "^0.15.0",
-    "husky": "^8.0.1",
-    "lint-staged": "^13.0.3",
+    "eslint-plugin-sonarjs": "^0.17.0",
+    "husky": "^8.0.2",
+    "lint-staged": "^13.1.0",
     "lodash": "^4.17.21",
     "npm-run-all": "^4.1.5",
     "pinst": "^3.0.0",
     "png.js": "^0.2.1",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.1",
     "pretty-bytes": "^6.0.0",
-    "skia-canvas": "^1.0.0",
-    "table": "^6.8.0",
-    "typescript": "^4.7.4"
+    "skia-canvas": "^1.0.1",
+    "table": "^6.8.1",
+    "typescript": "^4.9.4"
   },
   "lint-staged": {
     "*.@(js|ts|tsx|yml|yaml|md|json|html)": [
@@ -130,16 +132,16 @@
     "singleQuote": true,
     "arrowParens": "always"
   },
-  "packageManager": "yarn@3.2.3",
+  "packageManager": "yarn@3.3.1",
   "optionalDependencies": {
-    "@napi-rs/canvas-win32-x64-msvc": "0.1.29",
-    "@napi-rs/canvas-darwin-x64": "0.1.29",
-    "@napi-rs/canvas-linux-x64-gnu": "0.1.29",
-    "@napi-rs/canvas-linux-arm-gnueabihf": "0.1.29",
-    "@napi-rs/canvas-linux-x64-musl": "0.1.29",
-    "@napi-rs/canvas-linux-arm64-gnu": "0.1.29",
-    "@napi-rs/canvas-linux-arm64-musl": "0.1.29",
-    "@napi-rs/canvas-darwin-arm64": "0.1.29",
-    "@napi-rs/canvas-android-arm64": "0.1.29"
+    "@napi-rs/canvas-win32-x64-msvc": "0.1.31",
+    "@napi-rs/canvas-darwin-x64": "0.1.31",
+    "@napi-rs/canvas-linux-x64-gnu": "0.1.31",
+    "@napi-rs/canvas-linux-arm-gnueabihf": "0.1.31",
+    "@napi-rs/canvas-linux-x64-musl": "0.1.31",
+    "@napi-rs/canvas-linux-arm64-gnu": "0.1.31",
+    "@napi-rs/canvas-linux-arm64-musl": "0.1.31",
+    "@napi-rs/canvas-darwin-arm64": "0.1.31",
+    "@napi-rs/canvas-android-arm64": "0.1.31"
   }
 }