@napi-rs/canvas 0.1.23 → 0.1.26

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%2Fm103-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)
 

package/index.d.ts

@@ -1,3 +1,5 @@
+/// <reference lib="dom" />
+
 export interface DOMMatrix2DInit {
   a: number
   b: number
@@ -354,7 +356,7 @@ 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
@@ -362,29 +364,40 @@ export const enum PathOp {
   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,
 }
 
 export function convertSVGTextToPath(svg: Buffer | string): Buffer
+
+export interface LoadImageOptions {
+  alt?: string
+  maxRedirects?: number
+  requestOptions?: import('http').RequestOptions
+}
+
+export function loadImage(
+  source: string | URL | Buffer | ArrayBufferLike | Uint8Array | Image | import('stream').Readable,
+  options?: LoadImageOptions,
+): Promise<Image>

package/index.js

@@ -16,6 +16,8 @@ const {
 
 const { DOMPoint, DOMMatrix, DOMRect } = require('./geometry')
 
+const loadImage = require('./load-image')
+
 const StrokeJoin = {
   Miter: 0,
   Round: 1,
@@ -211,87 +213,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)
   }
@@ -344,4 +296,5 @@ module.exports = {
   DOMPoint,
   DOMMatrix,
   DOMRect,
+  loadImage,
 }

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.23",
+  "version": "0.1.26",
   "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.14.0",
     "husky": "^8.0.1",
     "lint-staged": "^13.0.0",
     "lodash": "^4.17.21",
@@ -90,11 +91,11 @@
     "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": {
-    "*.@(js|ts|tsx|yml|yaml|md|json)": [
+    "*.@(js|ts|tsx|yml|yaml|md|json|html)": [
       "prettier --write"
     ],
     "*.@(js|ts|tsx)": [
@@ -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.23",
-    "@napi-rs/canvas-darwin-x64": "0.1.23",
-    "@napi-rs/canvas-linux-x64-gnu": "0.1.23",
-    "@napi-rs/canvas-linux-arm-gnueabihf": "0.1.23",
-    "@napi-rs/canvas-linux-x64-musl": "0.1.23",
-    "@napi-rs/canvas-linux-arm64-gnu": "0.1.23",
-    "@napi-rs/canvas-linux-arm64-musl": "0.1.23",
-    "@napi-rs/canvas-darwin-arm64": "0.1.23",
-    "@napi-rs/canvas-android-arm64": "0.1.23"
+    "@napi-rs/canvas-win32-x64-msvc": "0.1.26",
+    "@napi-rs/canvas-darwin-x64": "0.1.26",
+    "@napi-rs/canvas-linux-x64-gnu": "0.1.26",
+    "@napi-rs/canvas-linux-arm-gnueabihf": "0.1.26",
+    "@napi-rs/canvas-linux-x64-musl": "0.1.26",
+    "@napi-rs/canvas-linux-arm64-gnu": "0.1.26",
+    "@napi-rs/canvas-linux-arm64-musl": "0.1.26",
+    "@napi-rs/canvas-darwin-arm64": "0.1.26",
+    "@napi-rs/canvas-android-arm64": "0.1.26"
   }
 }