Add support for WebP decoding

Author: LinusU

CHANGELOG.md

@@ -119,6 +119,7 @@ canvas.createJPEGStream() // new
  * Throw error if calling jpegStream when canvas was not built with JPEG support
  * Emit error if trying to load GIF, SVG or JPEG image when canvas was not built
    with support for that format
+ * Support for WebP Image loading
 
 1.6.x (unreleased)
 ==================

lib/image.js

@@ -1,26 +1,87 @@
-'use strict';
+const fs = require('fs')
+const get = require('simple-get')
+const webp = require('@cwasm/webp')
 
-/*!
- * Canvas - Image
- * Copyright (c) 2010 LearnBoost <[email protected]>
- * MIT Licensed
+const bindings = require('./bindings')
+
+/** @typedef {Object} Image */
+const Image = module.exports = bindings.Image
+
+const proto = Image.prototype
+const _getSource = proto.getSource
+const _setSource = proto.setSource
+
+delete proto.getSource
+delete proto.setSource
+
+/**
+ * @param {Image} image
+ * @param {Error} err
  */
+function signalError (image, err) {
+  if (typeof image.onerror === 'function') return image.onerror(err)
+
+  throw err
+}
 
 /**
- * Module dependencies.
+ * @param {Image} image
+ * @param {string} value
  */
+function loadDataUrl (image, value) {
+  const firstComma = value.indexOf(',')
+  const isBase64 = value.lastIndexOf('base64', firstComma) !== -1
+  const source = value.slice(firstComma + 1)
 
-const bindings = require('./bindings')
-const Image = module.exports = bindings.Image
-const http = require("http")
-const https = require("https")
+  let data
+  try {
+    data = Buffer.from(source, isBase64 ? 'base64' : 'utf8')
+  } catch (err) {
+    return signalError(image, err)
+  }
 
-const proto = Image.prototype;
-const _getSource = proto.getSource;
-const _setSource = proto.setSource;
+  return setSource(image, data, value)
+}
+
+/**
+ * @param {Image} image
+ * @param {string} value
+ */
+function loadHttpUrl (image, value) {
+  return get.concat(value, (err, res, data) => {
+    if (err) return signalError(image, err)
 
-delete proto.getSource;
-delete proto.setSource;
+    if (res.statusCode < 200 || res.statusCode >= 300) {
+      return signalError(image, new Error(`Server responded with ${res.statusCode}`))
+    }
+
+    return setSource(image, data, value)
+  })
+}
+
+/**
+ * @param {Image} image
+ * @param {string} value
+ */
+function loadFileUrl (image, value) {
+  fs.readFile(value.replace('file://', ''), (err, data) => {
+    if (err) return signalError(image, err)
+
+    setSource(image, data, value)
+  })
+}
+
+/**
+ * @param {Image} image
+ * @param {string} value
+ */
+function loadLocalFile (image, value) {
+  fs.readFile(value, (err, data) => {
+    if (err) return signalError(image, err)
+
+    setSource(image, data, value)
+  })
+}
 
 Object.defineProperty(Image.prototype, 'src', {
   /**
@@ -33,49 +94,44 @@ Object.defineProperty(Image.prototype, 'src', {
    * @param {String|Buffer} val filename, buffer, data URI, URL
    * @api public
    */
-  set(val) {
-    if (typeof val === 'string') {
-      if (/^\s*data:/.test(val)) { // data: URI
-        const commaI = val.indexOf(',')
-        // 'base64' must come before the comma
-        const isBase64 = val.lastIndexOf('base64', commaI) !== -1
-        const content = val.slice(commaI + 1)
-        setSource(this, Buffer.from(content, isBase64 ? 'base64' : 'utf8'), val);
-      } else if (/^\s*https?:\/\//.test(val)) { // remote URL
-        const onerror = err => {
-          if (typeof this.onerror === 'function') {
-            this.onerror(err)
-          } else {
-            throw err
-          }
-        }
-
-        const type = /^\s*https:\/\//.test(val) ? https : http
-        type.get(val, res => {
-          if (res.statusCode !== 200) {
-            return onerror(new Error(`Server responded with ${res.statusCode}`))
-          }
-          const buffers = []
-          res.on('data', buffer => buffers.push(buffer))
-          res.on('end', () => {
-            setSource(this, Buffer.concat(buffers));
-          })
-        }).on('error', onerror)
-      } else { // local file path assumed
-        setSource(this, val);
-      }
-    } else if (Buffer.isBuffer(val)) {
-      setSource(this, val);
+  set (val) {
+    if (Buffer.isBuffer(val)) {
+      return setSource(this, val, val)
+    }
+
+    if (typeof val !== 'string') {
+      return // ignore invalid values
+    }
+
+    // Strip leading & trailing whitespace
+    val = val.trim()
+
+    // Data URL
+    if (/^data:/.test(val)) {
+      return loadDataUrl(this, val)
     }
+
+    // HTTP(S) URL
+    if (/^https?:\/\//.test(val)) {
+      return loadHttpUrl(this, val)
+    }
+
+    // File URL
+    if (/^file:\/\//.test(val)) {
+      return loadFileUrl(this, val)
+    }
+
+    // Assume local file path
+    loadLocalFile(this, val)
   },
 
-  get() {
+  get () {
     // TODO https://github.com/Automattic/node-canvas/issues/118
-    return getSource(this);
+    return this._originalSource || _getSource.call(this)
   },
 
   configurable: true
-});
+})
 
 /**
  * Inspect image.
@@ -86,19 +142,27 @@ Object.defineProperty(Image.prototype, 'src', {
  * @api public
  */
 
-Image.prototype.inspect = function(){
-  return '[Image'
-    + (this.complete ? ':' + this.width + 'x' + this.height : '')
-    + (this.src ? ' ' + this.src : '')
-    + (this.complete ? ' complete' : '')
-    + ']';
-};
+Image.prototype.inspect = function () {
+  return '[Image' +
+    (this.complete ? ':' + this.width + 'x' + this.height : '') +
+    (this.src ? ' ' + this.src : '') +
+    (this.complete ? ' complete' : '') +
+    ']'
+}
 
-function getSource(img){
-  return img._originalSource || _getSource.call(img);
+/**
+ * @param {Buffer} source
+ */
+function isWebP (source) {
+  return (source.toString('ascii', 0, 4) === 'RIFF' && source.toString('ascii', 8, 12) === 'WEBP')
 }
 
-function setSource(img, src, origSrc){
-  _setSource.call(img, src);
-  img._originalSource = origSrc;
+/**
+ * @param {Image} image
+ * @param {Buffer} source
+ * @param {Buffer|string} originalSource
+ */
+function setSource (image, source, originalSource) {
+  _setSource.call(image, isWebP(source) ? webp.decode(source) : source)
+  image._originalSource = originalSource
 }

package.json

@@ -39,8 +39,10 @@
     "package_name": "{module_name}-v{version}-{node_abi}-{platform}-{libc}-{arch}.tar.gz"
   },
   "dependencies": {
+    "@cwasm/webp": "^0.1.0",
     "nan": "^2.11.1",
-    "node-pre-gyp": "^0.11.0"
+    "node-pre-gyp": "^0.11.0",
+    "simple-get": "^3.0.3"
   },
   "devDependencies": {
     "assert-rejects": "^1.0.0",

src/Image.cc

@@ -245,6 +245,16 @@ NAN_METHOD(Image::SetSource){
     uint8_t *buf = (uint8_t *) Buffer::Data(value->ToObject());
     unsigned len = Buffer::Length(value->ToObject());
     status = img->loadFromBuffer(buf, len);
+  // ImageData
+  } else if (value->IsObject()) {
+    auto imageData = value->ToObject();
+    auto width = imageData->Get(Nan::New("width").ToLocalChecked())->Int32Value();
+    auto height = imageData->Get(Nan::New("height").ToLocalChecked())->Int32Value();
+    Nan::TypedArrayContents<uint8_t> data(imageData->Get(Nan::New("data").ToLocalChecked()));
+
+    assert((width * height * 4) == data.length());
+
+    status = img->loadFromImageData(*data, width, height);
   }
 
   if (status) {
@@ -270,6 +280,37 @@ NAN_METHOD(Image::SetSource){
   }
 }
 
+cairo_status_t
+Image::loadFromImageData(uint8_t *data, uint32_t width, uint32_t height) {
+  _surface = cairo_image_surface_create(CAIRO_FORMAT_ARGB32, width, height);
+  auto status = cairo_surface_status(_surface);
+
+  if (status != CAIRO_STATUS_SUCCESS) return status;
+
+  auto stride = cairo_image_surface_get_stride(_surface);
+  auto target = cairo_image_surface_get_data(_surface);
+
+  for (auto y = 0; y < height; ++y) {
+    auto pixel = (target + (stride * y));
+
+    for (auto x = 0; x < width; ++x) {
+      uint8_t r = *(data++);
+      uint8_t g = *(data++);
+      uint8_t b = *(data++);
+      uint8_t a = *(data++);
+
+      *(pixel++) = b;
+      *(pixel++) = g;
+      *(pixel++) = r;
+      *(pixel++) = a;
+    }
+  }
+
+  cairo_surface_mark_dirty(_surface);
+
+  return CAIRO_STATUS_SUCCESS;
+}
+
 /*
  * Load image data from `buf` by sniffing
  * the bytes to determine format.

src/Image.h

@@ -67,6 +67,7 @@ class Image: public Nan::ObjectWrap {
     cairo_surface_t *surface();
     cairo_status_t loadSurface();
     cairo_status_t loadFromBuffer(uint8_t *buf, unsigned len);
+    cairo_status_t loadFromImageData(uint8_t *data, uint32_t width, uint32_t height);
     cairo_status_t loadPNGFromBuffer(uint8_t *buf);
     cairo_status_t loadPNG();
     void clearData();

test/fixtures/test.webp

@@ -18,6 +18,7 @@ const png_clock = `${__dirname}/fixtures/clock.png`
 const jpg_chrome = `${__dirname}/fixtures/chrome.jpg`
 const jpg_face = `${__dirname}/fixtures/face.jpeg`
 const svg_tree = `${__dirname}/fixtures/tree.svg`
+const webp_test = `${__dirname}/fixtures/test.webp`
 
 describe('Image', function () {
   it('Prototype and ctor are well-shaped, don\'t hit asserts on accessors (GH-803)', function () {
@@ -85,7 +86,7 @@ describe('Image', function () {
   it('loads SVG data URL base64', function () {
     const base64Enc = fs.readFileSync(svg_tree, 'base64')
     const dataURL = `data:image/svg+xml;base64,${base64Enc}`
-      return loadImage(dataURL).then((img) => {
+    return loadImage(dataURL).then((img) => {
       assert.strictEqual(img.onerror, null)
       assert.strictEqual(img.onload, null)
       assert.strictEqual(img.width, 200)
@@ -97,7 +98,7 @@ describe('Image', function () {
   it('loads SVG data URL utf8', function () {
     const utf8Encoded = fs.readFileSync(svg_tree, 'utf8')
     const dataURL = `data:image/svg+xml;utf8,${utf8Encoded}`
-      return loadImage(dataURL).then((img) => {
+    return loadImage(dataURL).then((img) => {
       assert.strictEqual(img.onerror, null)
       assert.strictEqual(img.onload, null)
       assert.strictEqual(img.width, 200)
@@ -106,6 +107,18 @@ describe('Image', function () {
     })
   })
 
+  it('loads WebP image', function () {
+    return loadImage(webp_test).then((img) => {
+      assert.strictEqual(img.onerror, null)
+      assert.strictEqual(img.onload, null)
+
+      assert.strictEqual(img.src, webp_test)
+      assert.strictEqual(img.width, 128)
+      assert.strictEqual(img.height, 128)
+      assert.strictEqual(img.complete, true)
+    })
+  })
+
   it('calls Image#onload multiple times', function () {
     return loadImage(png_clock).then((img) => {
       let onloadCalled = 0

test/image.test.js

@@ -1796,6 +1796,16 @@ tests['drawImage(img) svg with scaling from ctx'] = function (ctx, done) {
   img.src = imageSrc('tree.svg')
 }
 
+tests['drawImage(img) WebP'] = function (ctx, done) {
+  var img = new Image()
+  img.onload = function () {
+    ctx.drawImage(img, 0, 0)
+    done(null)
+  }
+  img.onerror = done
+  img.src = imageSrc('test.webp')
+}
+
 tests['drawImage(img,x,y)'] = function (ctx, done) {
   var img = new Image()
   img.onload = function () {