@napi-rs/canvas 0.1.28 → 0.1.30

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%2Fm105-hotpink)
+![Skia Version](https://img.shields.io/badge/Skia-chrome%2Fm106-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)
 
@@ -41,12 +41,16 @@ npm install @napi-rs/canvas
 
 [**_cortex-a57_**](https://en.wikipedia.org/wiki/ARM_Cortex-A57) or newer CPU architecture on **Linux**.
 
-All `m` chips on **macOS**.
+All Apple M chips on **macOS**.
 
 ### `armv7`
 
 [**_cortex-a7_**](https://en.wikipedia.org/wiki/ARM_Cortex-A7) or newer CPU architecture.
 
+### glibc
+
+Since Skia relies on the [glibc](https://www.gnu.org/software/libc/) 2.18 API, you need to have at least glibc version >= 2.18 on your system.
+
 # Usage
 
 ```js
@@ -92,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')
@@ -324,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
 
@@ -302,9 +300,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

@@ -5,9 +5,8 @@ const {
   clearAllCache,
   CanvasRenderingContext2D,
   CanvasElement,
-  createContext,
   SVGCanvas,
-  Path2D,
+  Path: Path2D,
   ImageData,
   Image,
   CanvasPattern,
@@ -47,128 +46,9 @@ Object.defineProperty(GlobalFonts, 'has', {
   writable: false,
 })
 
-CanvasRenderingContext2D.prototype.createPattern = function createPattern(image, repetition) {
-  if (image instanceof ImageData) {
-    const pattern = new CanvasPattern(image, repetition, 0)
-    Object.defineProperty(pattern, '_imageData', {
-      writable: true,
-      configurable: false,
-      enumerable: false,
-      value: null,
-    })
-    return pattern
-  } else if (image instanceof Image) {
-    return new CanvasPattern(image, repetition, 1)
-  } else if (image instanceof CanvasElement || image instanceof SVGCanvas) {
-    return new CanvasPattern(image, repetition, 2)
-  }
-  throw TypeError('Image should be instance of ImageData or Image')
-}
-
-CanvasRenderingContext2D.prototype.getImageData = function getImageData(x, y, w, h) {
-  const data = this._getImageData(x, y, w, h)
-  return new ImageData(data, w, h)
-}
-
 function createCanvas(width, height, flag) {
   const isSvgBackend = typeof flag !== 'undefined'
-  const canvasElement = isSvgBackend ? new SVGCanvas(width, height) : new CanvasElement(width, height)
-
-  let ctx
-  canvasElement.getContext = function getContext(type, attr = {}) {
-    if (type !== '2d') {
-      throw new Error('Unsupported type')
-    }
-    const attrs = { alpha: true, colorSpace: 'srgb', ...attr }
-    ctx = ctx
-      ? ctx
-      : isSvgBackend
-      ? new CanvasRenderingContext2D(this.width, this.height, attrs.colorSpace, flag)
-      : new CanvasRenderingContext2D(this.width, this.height, attrs.colorSpace)
-    createContext(ctx, this.width, this.height, attrs)
-
-    // napi can not define writable: true but enumerable: false property
-    Object.defineProperty(ctx, '_fillStyle', {
-      value: '#000',
-      configurable: false,
-      enumerable: false,
-      writable: true,
-    })
-
-    Object.defineProperty(ctx, '_strokeStyle', {
-      value: '#000',
-      configurable: false,
-      enumerable: false,
-      writable: true,
-    })
-
-    Object.defineProperty(ctx, 'createImageData', {
-      value: function createImageData(widthOrImage, height, attrs = {}) {
-        if (widthOrImage instanceof ImageData) {
-          return new ImageData(widthOrImage.data, widthOrImage.width, widthOrImage.height)
-        }
-        return new ImageData(widthOrImage, height, { colorSpace: 'srgb', ...attrs })
-      },
-      configurable: true,
-      enumerable: false,
-      writable: true,
-    })
-
-    Object.defineProperty(canvasElement, 'ctx', {
-      value: ctx,
-      enumerable: false,
-      configurable: false,
-    })
-
-    ctx.canvas = canvasElement
-
-    return ctx
-  }
-
-  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,35 +219,39 @@ if (!nativeBinding) {
 }
 
 const {
-  clearAllCache,
+  ChromaSubsampling,
+  SvgExportFlag,
   CanvasRenderingContext2D,
-  CanvasElement,
-  createContext,
-  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.createContext = createContext
-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

@@ -39,7 +39,13 @@ module.exports = async function loadImage(source, options = {}) {
       source = !(source instanceof URL) ? new URL(source) : source
       // attempt to download the remote source and construct image
       const data = await new Promise((resolve, reject) =>
-        makeRequest(source, resolve, reject, options.maxRedirects ?? MAX_REDIRECTS, options.requestOptions),
+        makeRequest(
+          source,
+          resolve,
+          reject,
+          typeof options.maxRedirects === 'number' && options.maxRedirects >= 0 ? options.maxRedirects : MAX_REDIRECTS,
+          options.requestOptions,
+        ),
       )
       return createImage(data, options.alt)
     }
@@ -54,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?
@@ -86,6 +94,7 @@ function createImage(src, alt) {
 
 function isBufferLike(src) {
   return (
+    (src && src.type === 'Buffer') ||
     Array.isArray(src) ||
     src instanceof ArrayBuffer ||
     src instanceof SharedArrayBuffer ||

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@napi-rs/canvas",
-  "version": "0.1.28",
+  "version": "0.1.30",
   "description": "Canvas for Node.js with skia backend",
   "main": "index.js",
   "repository": "https://github.com/Brooooooklyn/canvas.git",
@@ -49,8 +49,8 @@
   "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",
@@ -65,36 +65,36 @@
     "@jimp/custom": "^0.16.1",
     "@jimp/jpeg": "^0.16.1",
     "@jimp/png": "^0.16.1",
-    "@napi-rs/cli": "^2.9.0",
-    "@octokit/rest": "^19.0.0",
+    "@napi-rs/cli": "^2.11.4",
+    "@octokit/rest": "^19.0.4",
     "@swc-node/register": "^1.5.1",
-    "@types/lodash": "^4.14.182",
-    "@types/node": "^17.0.35",
-    "@typescript-eslint/eslint-plugin": "^5.26.0",
-    "@typescript-eslint/parser": "^5.26.0",
-    "ava": "^4.2.0",
+    "@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",
     "benny": "^3.7.1",
-    "canvas": "^2.9.1",
-    "canvaskit-wasm": "^0.35.0",
+    "canvas": "^2.9.3",
+    "canvaskit-wasm": "^0.37.0",
     "colorette": "^2.0.19",
     "conventional-changelog-cli": "^2.2.2",
-    "echarts": "^5.3.2",
-    "eslint": "^8.16.0",
+    "echarts": "^5.3.3",
+    "eslint": "^8.22.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-sonarjs": "^0.15.0",
     "husky": "^8.0.1",
-    "lint-staged": "^13.0.0",
+    "lint-staged": "^13.0.3",
     "lodash": "^4.17.21",
     "npm-run-all": "^4.1.5",
     "pinst": "^3.0.0",
     "png.js": "^0.2.1",
-    "prettier": "^2.6.2",
+    "prettier": "^2.7.1",
     "pretty-bytes": "^6.0.0",
     "skia-canvas": "^1.0.0",
     "table": "^6.8.0",
-    "typescript": "^4.7.2"
+    "typescript": "^4.7.4"
   },
   "lint-staged": {
     "*.@(js|ts|tsx|yml|yaml|md|json|html)": [
@@ -130,16 +130,16 @@
     "singleQuote": true,
     "arrowParens": "always"
   },
-  "packageManager": "yarn@3.2.2",
+  "packageManager": "yarn@3.2.3",
   "optionalDependencies": {
-    "@napi-rs/canvas-win32-x64-msvc": "0.1.28",
-    "@napi-rs/canvas-darwin-x64": "0.1.28",
-    "@napi-rs/canvas-linux-x64-gnu": "0.1.28",
-    "@napi-rs/canvas-linux-arm-gnueabihf": "0.1.28",
-    "@napi-rs/canvas-linux-x64-musl": "0.1.28",
-    "@napi-rs/canvas-linux-arm64-gnu": "0.1.28",
-    "@napi-rs/canvas-linux-arm64-musl": "0.1.28",
-    "@napi-rs/canvas-darwin-arm64": "0.1.28",
-    "@napi-rs/canvas-android-arm64": "0.1.28"
+    "@napi-rs/canvas-win32-x64-msvc": "0.1.30",
+    "@napi-rs/canvas-darwin-x64": "0.1.30",
+    "@napi-rs/canvas-linux-x64-gnu": "0.1.30",
+    "@napi-rs/canvas-linux-arm-gnueabihf": "0.1.30",
+    "@napi-rs/canvas-linux-x64-musl": "0.1.30",
+    "@napi-rs/canvas-linux-arm64-gnu": "0.1.30",
+    "@napi-rs/canvas-linux-arm64-musl": "0.1.30",
+    "@napi-rs/canvas-darwin-arm64": "0.1.30",
+    "@napi-rs/canvas-android-arm64": "0.1.30"
   }
 }