imageSmoothingEnabled for export functions. close #1320

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v8.3.5
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Mon Mar 21 2022
+   * Date: Mon Apr 11 2022
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -3982,6 +3982,9 @@
                   (stage ? stage.height() : 0),
               pixelRatio: pixelRatio,
           }), context = canvas.getContext();
+          if (config.imageSmoothingEnabled === false) {
+              context._context.imageSmoothingEnabled = false;
+          }
           context.save();
           if (x || y) {
               context.translate(-1 * x, -1 * y);
@@ -4004,6 +4007,7 @@
        * You can use that property to increase quality of the image, for example for super hight quality exports
        * or usage on retina (or similar) displays. pixelRatio will be used to multiply the size of exported image.
        * If you export to 500x500 size with pixelRatio = 2, then produced image will have size 1000x1000.
+       * @param {Boolean} [config.imageSmoothingEnabled] set this to false if you want to disable imageSmoothing
        * @example
        * var canvas = node.toCanvas();
        */
@@ -4030,6 +4034,7 @@
        * You can use that property to increase quality of the image, for example for super hight quality exports
        * or usage on retina (or similar) displays. pixelRatio will be used to multiply the size of exported image.
        * If you export to 500x500 size with pixelRatio = 2, then produced image will have size 1000x1000.
+       * @param {Boolean} [config.imageSmoothingEnabled] set this to false if you want to disable imageSmoothing
        * @returns {String}
        */
       toDataURL(config) {
@@ -4062,6 +4067,7 @@
        * You can use that property to increase quality of the image, for example for super hight quality exports
        * or usage on retina (or similar) displays. pixelRatio will be used to multiply the size of exported image.
        * If you export to 500x500 size with pixelRatio = 2, then produced image will have size 1000x1000.
+       * @param {Boolean} [config.imageSmoothingEnabled] set this to false if you want to disable imageSmoothing
        * @example
        * var image = node.toImage({
        *   callback(img) {

package.json

@@ -60,10 +60,10 @@
     }
   ],
   "devDependencies": {
-    "@parcel/transformer-image": "2.3.2",
+    "@parcel/transformer-image": "2.4.1",
     "@size-limit/preset-big-lib": "^7.0.8",
     "@types/mocha": "^9.1.0",
-    "canvas": "^2.9.0",
+    "canvas": "^2.9.1",
     "chai": "4.3.6",
     "filehound": "^1.17.5",
     "gulp": "^4.0.2",
@@ -79,9 +79,9 @@
     "gulp-util": "^3.0.8",
     "mocha": "9.2.2",
     "mocha-headless-chrome": "^4.0.0",
-    "parcel": "2.3.2",
+    "parcel": "2.4.1",
     "process": "^0.11.10",
-    "rollup": "^2.70.0",
+    "rollup": "^2.70.1",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-sourcemaps": "^0.6.3",
@@ -89,7 +89,7 @@
     "size-limit": "^7.0.8",
     "ts-mocha": "^9.0.2",
     "ts-node": "^9.1.1",
-    "typescript": "4.5.5"
+    "typescript": "4.6.3"
   },
   "keywords": [
     "canvas",

src/Node.ts

@@ -1903,6 +1903,9 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
       }),
       context = canvas.getContext();
 
+    if (config.imageSmoothingEnabled === false) {
+      context._context.imageSmoothingEnabled = false;
+    }
     context.save();
 
     if (x || y) {
@@ -1928,6 +1931,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
    * You can use that property to increase quality of the image, for example for super hight quality exports
    * or usage on retina (or similar) displays. pixelRatio will be used to multiply the size of exported image.
    * If you export to 500x500 size with pixelRatio = 2, then produced image will have size 1000x1000.
+   * @param {Boolean} [config.imageSmoothingEnabled] set this to false if you want to disable imageSmoothing
    * @example
    * var canvas = node.toCanvas();
    */
@@ -1954,6 +1958,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
    * You can use that property to increase quality of the image, for example for super hight quality exports
    * or usage on retina (or similar) displays. pixelRatio will be used to multiply the size of exported image.
    * If you export to 500x500 size with pixelRatio = 2, then produced image will have size 1000x1000.
+   * @param {Boolean} [config.imageSmoothingEnabled] set this to false if you want to disable imageSmoothing
    * @returns {String}
    */
   toDataURL(config?: {
@@ -1996,6 +2001,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
    * You can use that property to increase quality of the image, for example for super hight quality exports
    * or usage on retina (or similar) displays. pixelRatio will be used to multiply the size of exported image.
    * If you export to 500x500 size with pixelRatio = 2, then produced image will have size 1000x1000.
+   * @param {Boolean} [config.imageSmoothingEnabled] set this to false if you want to disable imageSmoothing
    * @example
    * var image = node.toImage({
    *   callback(img) {

test/unit/Node-test.ts

@@ -445,6 +445,36 @@ describe('Node', function () {
     assert.equal(oldURL, newURL);
   });
 
+  // ======================================================
+  it('export with smooth disabled', function (done) {
+    loadImage('lion.png', (imageObj) => {
+      var stage = addStage();
+      var layer = new Konva.Layer({
+        imageSmoothingEnabled: false,
+      });
+      stage.add(layer);
+
+      var image = new Konva.Image({
+        x: -50,
+        y: -50,
+        image: imageObj,
+        scaleX: 5,
+        scaleY: 5,
+      });
+      layer.add(image);
+
+      const canvas = layer.toCanvas({
+        imageSmoothingEnabled: false,
+        pixelRatio: layer.getCanvas().getPixelRatio(),
+      });
+      layer.draw();
+      compareLayerAndCanvas(layer, canvas);
+
+      // just check clone without crashes
+      done();
+    });
+  });
+
   // ======================================================
   it("listen and don't listen", function () {
     var stage = addStage();