@napi-rs/canvas 0.1.24 → 0.1.27

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%2Fm104-hotpink)
+![Skia Version](https://img.shields.io/badge/Skia-chrome%2Fm105-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)
 
@@ -76,7 +76,7 @@ ctx.closePath()
 ctx.stroke()
 
 async function main() {
-  const pngData = await canvas.encode('png') // JPEG and WebP is also supported
+  const pngData = await canvas.encode('png') // JPEG, AVIF and WebP are also supported
   // encoding in libuv thread pool, non-blocking
   await promises.writeFile(join(__dirname, 'simple.png'), pngData)
 }

package/index.d.ts

@@ -1,3 +1,5 @@
+/// <reference lib="dom" />
+
 export interface DOMMatrix2DInit {
   a: number
   b: number
@@ -354,34 +356,34 @@ interface IGlobalFonts {
 
 export const GlobalFonts: IGlobalFonts
 
-export const enum PathOp {
+export enum PathOp {
   Difference = 0, // subtract the op path from the first path
   Intersect = 1, // intersect the two paths
   Union = 2, // union (inclusive-or) the two paths
-  XOR = 3, // exclusive-or the two paths
+  Xor = 3, // exclusive-or the two paths
   ReverseDifference = 4, // subtract the first path from the op path
 }
 
-export const enum FillType {
+export enum FillType {
   Winding = 0,
   EvenOdd = 1,
   InverseWinding = 2,
   InverseEvenOdd = 3,
 }
 
-export const enum StrokeJoin {
+export enum StrokeJoin {
   Miter = 0,
   Round = 1,
   Bevel = 2,
 }
 
-export const enum StrokeCap {
+export enum StrokeCap {
   Butt = 0,
   Round = 1,
   Square = 2,
 }
 
-export const enum SvgExportFlag {
+export enum SvgExportFlag {
   ConvertTextToPaths = 0x01,
   NoPrettyXML = 0x02,
   RelativePathEncoding = 0x04,
@@ -390,9 +392,9 @@ export const enum SvgExportFlag {
 export function convertSVGTextToPath(svg: Buffer | string): Buffer
 
 export interface LoadImageOptions {
-  alt?: string,
-  maxRedirects?: number,
-  requestOptions?: import('http').RequestOptions,
+  alt?: string
+  maxRedirects?: number
+  requestOptions?: import('http').RequestOptions
 }
 
 export function loadImage(

package/index.js

@@ -11,95 +11,35 @@ const {
   Image,
   CanvasPattern,
   GlobalFonts,
-  convertSVGTextToPath: _convertSVGTextToPath,
+  PathOp,
+  FillType,
+  StrokeJoin,
+  StrokeCap,
+  convertSVGTextToPath,
 } = require('./js-binding')
 
 const { DOMPoint, DOMMatrix, DOMRect } = require('./geometry')
 
 const loadImage = require('./load-image')
 
-const StrokeJoin = {
-  Miter: 0,
-  Round: 1,
-  Bevel: 2,
-}
-
-const StrokeCap = {
-  Butt: 0,
-  Round: 1,
-  Square: 2,
-}
-
-const PathOp = {
-  Difference: 0, // subtract the op path from the first path
-  Intersect: 1, // intersect the two paths
-  Union: 2, // union (inclusive-or) the two paths
-  XOR: 3, // exclusive-or the two paths
-  ReverseDifference: 4, // subtract the first path from the op path
-}
-
-const FillType = {
-  Winding: 0,
-  EvenOdd: 1,
-  InverseWinding: 2,
-  InverseEvenOdd: 3,
-}
-
 const SvgExportFlag = {
   ConvertTextToPaths: 0x01,
   NoPrettyXML: 0x02,
   RelativePathEncoding: 0x04,
 }
 
-const GlobalFontsSingleton = new GlobalFonts()
-let FamilyNamesSet = JSON.parse(GlobalFontsSingleton._families)
-
 // eslint-disable-next-line sonarjs/no-unused-collection
 const Fonts = []
 
-Object.defineProperty(GlobalFontsSingleton, 'register', {
-  value: function register(fontData, nameAlias = '') {
-    const result = GlobalFontsSingleton._register(fontData, nameAlias)
-    FamilyNamesSet = JSON.parse(GlobalFontsSingleton._families)
-    Fonts.push(fontData)
-    return result
-  },
-  configurable: false,
-  enumerable: false,
-  writable: false,
-})
-
-Object.defineProperty(GlobalFontsSingleton, 'registerFromPath', {
-  value: function registerFromPath(path, nameAlias = '') {
-    const result = GlobalFontsSingleton._registerFromPath(path, nameAlias)
-    FamilyNamesSet = JSON.parse(GlobalFontsSingleton._families)
-    return result
-  },
-  configurable: false,
-  enumerable: false,
-  writable: false,
-})
-
-Object.defineProperty(GlobalFontsSingleton, 'loadFontsFromDir', {
-  value: function loadFontsFromDir(path) {
-    const result = GlobalFontsSingleton._loadFontsFromDir(path)
-    FamilyNamesSet = JSON.parse(GlobalFontsSingleton._families)
-    return result
-  },
-  configurable: false,
-  enumerable: false,
-  writable: false,
-})
-
-Object.defineProperty(GlobalFontsSingleton, 'families', {
+Object.defineProperty(GlobalFonts, 'families', {
   get: function () {
-    return FamilyNamesSet
+    return JSON.parse(GlobalFonts.getFamilies())
   },
 })
 
-Object.defineProperty(GlobalFontsSingleton, 'has', {
+Object.defineProperty(GlobalFonts, 'has', {
   value: function has(name) {
-    return !!FamilyNamesSet.find(({ family }) => family === name)
+    return !!JSON.parse(GlobalFonts.getFamilies()).find(({ family }) => family === name)
   },
   configurable: false,
   enumerable: false,
@@ -129,27 +69,6 @@ CanvasRenderingContext2D.prototype.getImageData = function getImageData(x, y, w,
   return new ImageData(data, w, h)
 }
 
-Path2D.prototype.stroke = function stroke(strokeOptions = {}) {
-  const width = typeof strokeOptions.width === 'undefined' ? 1 : strokeOptions.width
-  const miterLimit = typeof strokeOptions.miterLimit === 'undefined' ? 4 : strokeOptions.miterLimit
-  const join = typeof strokeOptions.join === 'undefined' ? StrokeJoin.Miter : strokeOptions.join
-  const cap = typeof strokeOptions.cap === 'undefined' ? StrokeCap.Butt : strokeOptions.cap
-
-  return this._stroke(width, miterLimit, join, cap)
-}
-
-Path2D.prototype.getFillTypeString = function getFillTypeString() {
-  const fillType = this.getFillType()
-
-  if (fillType === FillType.Winding) {
-    return 'nonzero'
-  } else if (fillType === FillType.EvenOdd) {
-    return 'evenodd'
-  } else {
-    return 'nonzero' // default
-  }
-}
-
 function createCanvas(width, height, flag) {
   const isSvgBackend = typeof flag !== 'undefined'
   const canvasElement = isSvgBackend ? new SVGCanvas(width, height) : new CanvasElement(width, height)
@@ -163,8 +82,8 @@ function createCanvas(width, height, flag) {
     ctx = ctx
       ? ctx
       : isSvgBackend
-      ? new CanvasRenderingContext2D(this.width, this.height, GlobalFontsSingleton, attrs.colorSpace, flag)
-      : new CanvasRenderingContext2D(this.width, this.height, GlobalFontsSingleton, attrs.colorSpace)
+      ? 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
@@ -213,87 +132,37 @@ 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) {
+  canvasElement.encode = function encode(type, qualityOrConfig = {}) {
     if (type === 'avif') {
-      return canvasEncode.call(
-        this,
-        type,
-        JSON.stringify({
-          ...avifConfig,
-          ...(qualityOrConfig || {}),
-        }),
-      )
+      return canvasEncode.call(this, type, JSON.stringify(qualityOrConfig))
     }
     return canvasEncode.call(this, type, qualityOrConfig)
   }
 
-  canvasElement.encodeSync = function encodeSync(type, qualityOrConfig) {
+  canvasElement.encodeSync = function encodeSync(type, qualityOrConfig = {}) {
     if (type === 'avif') {
-      return canvasEncodeSync.call(
-        this,
-        type,
-        JSON.stringify({
-          ...avifConfig,
-          ...(qualityOrConfig || {}),
-        }),
-      )
+      return canvasEncodeSync.call(this, type, JSON.stringify(qualityOrConfig))
     }
     return canvasEncodeSync.call(this, type, qualityOrConfig)
   }
 
-  canvasElement.toBuffer = function toBuffer(type = 'image/png', qualityOrConfig) {
+  canvasElement.toBuffer = function toBuffer(type = 'image/png', qualityOrConfig = {}) {
     if (type === 'avif') {
-      return canvasToBuffer.call(
-        this,
-        type,
-        JSON.stringify({
-          ...avifConfig,
-          ...(qualityOrConfig || {}),
-        }),
-      )
+      return canvasToBuffer.call(this, type, JSON.stringify(qualityOrConfig))
     }
     return canvasToBuffer.call(this, type, qualityOrConfig)
   }
 
-  canvasElement.toDataURL = function toDataURL(type = 'image/png', qualityOrConfig) {
+  canvasElement.toDataURL = function toDataURL(type = 'image/png', qualityOrConfig = {}) {
     if (type === 'avif') {
-      return canvasToDataURL.call(
-        this,
-        type,
-        JSON.stringify({
-          ...avifConfig,
-          ...(qualityOrConfig || {}),
-        }),
-      )
+      return canvasToDataURL.call(this, type, JSON.stringify(qualityOrConfig))
     }
     return canvasToDataURL.call(this, type, qualityOrConfig)
   }
 
-  canvasElement.toDataURLAsync = function toDataURLAsync(type = 'image/png', qualityOrConfig) {
+  canvasElement.toDataURLAsync = function toDataURLAsync(type = 'image/png', qualityOrConfig = {}) {
     if (type === 'avif') {
-      return canvasToDataURLAsync.call(
-        this,
-        type,
-        JSON.stringify({
-          ...avifConfig,
-          ...(qualityOrConfig || {}),
-        }),
-      )
+      return canvasToDataURLAsync.call(this, type, JSON.stringify(qualityOrConfig))
     }
     return canvasToDataURLAsync.call(this, type, qualityOrConfig)
   }
@@ -308,26 +177,21 @@ class Canvas {
 }
 
 if (!process.env.DISABLE_SYSTEM_FONTS_LOAD) {
-  GlobalFontsSingleton.loadSystemFonts()
+  GlobalFonts.loadSystemFonts()
   const platformName = platform()
   const homedirPath = homedir()
   switch (platformName) {
     case 'win32':
-      GlobalFontsSingleton.loadFontsFromDir(join(homedirPath, 'AppData', 'Local', 'Microsoft', 'Windows', 'Fonts'))
+      GlobalFonts.loadFontsFromDir(join(homedirPath, 'AppData', 'Local', 'Microsoft', 'Windows', 'Fonts'))
       break
     case 'darwin':
-      GlobalFontsSingleton.loadFontsFromDir(join(homedirPath, 'Library', 'Fonts'))
+      GlobalFonts.loadFontsFromDir(join(homedirPath, 'Library', 'Fonts'))
       break
     case 'linux':
-      GlobalFontsSingleton.loadFontsFromDir(join('usr', 'local', 'share', 'fonts'))
-      GlobalFontsSingleton.loadFontsFromDir(join(homedirPath, '.fonts'))
+      GlobalFonts.loadFontsFromDir(join('usr', 'local', 'share', 'fonts'))
+      GlobalFonts.loadFontsFromDir(join(homedirPath, '.fonts'))
       break
   }
-  FamilyNamesSet = JSON.parse(GlobalFontsSingleton._families)
-}
-
-function convertSVGTextToPath(input) {
-  return _convertSVGTextToPath(Buffer.isBuffer(input) ? input : Buffer.from(input), GlobalFontsSingleton)
 }
 
 module.exports = {
@@ -341,7 +205,7 @@ module.exports = {
   StrokeCap,
   StrokeJoin,
   SvgExportFlag,
-  GlobalFonts: GlobalFontsSingleton,
+  GlobalFonts: GlobalFonts,
   convertSVGTextToPath,
   DOMPoint,
   DOMMatrix,

package/js-binding.js

@@ -200,21 +200,29 @@ const {
   CanvasElement,
   createContext,
   SVGCanvas,
-  Path2D,
+  Path,
   ImageData,
   Image,
   CanvasPattern,
   GlobalFonts,
   convertSVGTextToPath,
+  PathOp,
+  FillType,
+  StrokeJoin,
+  StrokeCap,
 } = nativeBinding
 
 module.exports.CanvasRenderingContext2D = CanvasRenderingContext2D
 module.exports.CanvasElement = CanvasElement
 module.exports.createContext = createContext
 module.exports.SVGCanvas = SVGCanvas
-module.exports.Path2D = Path2D
+module.exports.Path2D = Path
 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

package/load-image.js

@@ -0,0 +1,94 @@
+const fs = require('fs')
+const { Image } = require('./js-binding')
+const { Readable } = require('stream')
+
+let http, https
+
+const MAX_REDIRECTS = 20,
+  REDIRECT_STATUSES = new Set([301, 302]),
+  DATA_URI = /^\s*data:/
+
+/**
+ * Loads the given source into canvas Image
+ * @param {string|URL|Image|Buffer} source The image source to be loaded
+ * @param {object} options Options passed to the loader
+ */
+module.exports = async function loadImage(source, options = {}) {
+  // load readable stream as image
+  if (source instanceof Readable) return createImage(await consumeStream(source), options.alt)
+  // use the same buffer without copying if the source is a buffer
+  if (Buffer.isBuffer(source)) return createImage(source, options.alt)
+  // construct a buffer if the source is buffer-like
+  if (isBufferLike(source)) return createImage(Buffer.from(source), options.alt)
+  // if the source is Image instance, copy the image src to new image
+  if (source instanceof Image) return createImage(source.src, options.alt)
+  // if source is string and in data uri format, construct image using data uri
+  if (typeof source === 'string' && DATA_URI.test(source)) {
+    const commaIdx = source.indexOf(',')
+    const encoding = source.lastIndexOf('base64', commaIdx) < 0 ? 'utf-8' : 'base64'
+    const data = Buffer.from(source.slice(commaIdx + 1), encoding)
+    return createImage(data, options.alt)
+  }
+  // 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)) {
+      return createImage(await fs.promises.readFile(source), options.alt)
+    } else {
+      // the source is a remote url here
+      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),
+      )
+      return createImage(data, options.alt)
+    }
+  }
+
+  // throw error as dont support that source
+  throw new TypeError('unsupported image source')
+}
+
+function makeRequest(url, resolve, reject, redirectCount, requestOptions) {
+  const isHttps = url.protocol === 'https:'
+  // 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}`))
+    }
+
+    consumeStream(res).then(resolve, reject)
+  })
+}
+
+// use stream/consumers in the future?
+function consumeStream(res) {
+  return new Promise((resolve, reject) => {
+    const chunks = []
+
+    res.on('data', (chunk) => chunks.push(chunk))
+    res.on('end', () => resolve(Buffer.concat(chunks)))
+    res.on('error', reject)
+  })
+}
+
+function createImage(src, alt) {
+  const image = new Image()
+  image.src = src
+  if (typeof alt === 'string') image.alt = alt
+  return image
+}
+
+function isBufferLike(src) {
+  return (
+    Array.isArray(src) ||
+    src instanceof ArrayBuffer ||
+    src instanceof SharedArrayBuffer ||
+    src instanceof Object.getPrototypeOf(Uint8Array)
+  )
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@napi-rs/canvas",
-  "version": "0.1.24",
+  "version": "0.1.27",
   "description": "Canvas for Node.js with skia backend",
   "main": "index.js",
   "repository": "https://github.com/Brooooooklyn/canvas.git",
@@ -22,7 +22,8 @@
     "index.d.ts",
     "index.js",
     "geometry.js",
-    "js-binding.js"
+    "js-binding.js",
+    "load-image.js"
   ],
   "napi": {
     "name": "skia",
@@ -65,7 +66,7 @@
     "@jimp/jpeg": "^0.16.1",
     "@jimp/png": "^0.16.1",
     "@napi-rs/cli": "^2.9.0",
-    "@octokit/rest": "^18.12.0",
+    "@octokit/rest": "^19.0.0",
     "@swc-node/register": "^1.5.1",
     "@types/lodash": "^4.14.182",
     "@types/node": "^17.0.35",
@@ -74,7 +75,7 @@
     "ava": "^4.2.0",
     "benny": "^3.7.1",
     "canvas": "^2.9.1",
-    "canvaskit-wasm": "^0.34.0",
+    "canvaskit-wasm": "^0.35.0",
     "colorette": "^2.0.16",
     "conventional-changelog-cli": "^2.2.2",
     "echarts": "^5.3.2",
@@ -82,7 +83,7 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-sonarjs": "^0.13.0",
+    "eslint-plugin-sonarjs": "^0.15.0",
     "husky": "^8.0.1",
     "lint-staged": "^13.0.0",
     "lodash": "^4.17.21",
@@ -90,7 +91,7 @@
     "pinst": "^3.0.0",
     "png.js": "^0.2.1",
     "prettier": "^2.6.2",
-    "skia-canvas": "^0.9.29",
+    "skia-canvas": "^1.0.0",
     "typescript": "^4.7.2"
   },
   "lint-staged": {
@@ -108,6 +109,10 @@
     "extensions": [
       "ts"
     ],
+    "files": [
+      "__test__/**/*.spec.ts",
+      "scripts/__test__/**/*.spec.ts"
+    ],
     "workerThreads": false,
     "cache": false,
     "timeout": "3m",
@@ -123,16 +128,16 @@
     "singleQuote": true,
     "arrowParens": "always"
   },
-  "packageManager": "yarn@3.2.1",
+  "packageManager": "yarn@3.2.2",
   "optionalDependencies": {
-    "@napi-rs/canvas-win32-x64-msvc": "0.1.24",
-    "@napi-rs/canvas-darwin-x64": "0.1.24",
-    "@napi-rs/canvas-linux-x64-gnu": "0.1.24",
-    "@napi-rs/canvas-linux-arm-gnueabihf": "0.1.24",
-    "@napi-rs/canvas-linux-x64-musl": "0.1.24",
-    "@napi-rs/canvas-linux-arm64-gnu": "0.1.24",
-    "@napi-rs/canvas-linux-arm64-musl": "0.1.24",
-    "@napi-rs/canvas-darwin-arm64": "0.1.24",
-    "@napi-rs/canvas-android-arm64": "0.1.24"
+    "@napi-rs/canvas-win32-x64-msvc": "0.1.27",
+    "@napi-rs/canvas-darwin-x64": "0.1.27",
+    "@napi-rs/canvas-linux-x64-gnu": "0.1.27",
+    "@napi-rs/canvas-linux-arm-gnueabihf": "0.1.27",
+    "@napi-rs/canvas-linux-x64-musl": "0.1.27",
+    "@napi-rs/canvas-linux-arm64-gnu": "0.1.27",
+    "@napi-rs/canvas-linux-arm64-musl": "0.1.27",
+    "@napi-rs/canvas-darwin-arm64": "0.1.27",
+    "@napi-rs/canvas-android-arm64": "0.1.27"
   }
 }