css-js-filter - npm Package Compare versions

Comparing version 1.2.1 to 1.2.2

CHANGELOG.md

@@ -5,2 +5,4 @@ # Changelog
 
+### [1.2.2](https://github.com/wolframdeus/css-js-filter/compare/v1.2.1...v1.2.2) (2020-11-14)
+
 ### [1.2.1](https://github.com/wolframdeus/css-js-filter/compare/v1.2.0...v1.2.1) (2020-11-14)
@@ -7,0 +9,0 @@

dist/createCSSFilter.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.createCSSFilter=void 0;var utils_1=require("./utils");function createCSSFilter(e){var t=e.name,r=e.processImage,i="getCSSFilter"in e?e.getCSSFilter:function(t){return e.cssFunctionName+"("+t+e.cssFunctionValuePostfix+")"},n="isDefault"in e?e.isDefault:function(t){return e.defaultValue===t};function a(e,t,i){void 0===i&&(i={});var n=i.byRef,a=void 0===n||n,o=i.type,u=void 0===o?"rgba":o,s=e instanceof ImageData?e.data:e;if(s.length%utils_1.getBytesCount(u))throw new Error("Entity is corrupted. Choose another entity type or check entity itself");return s=a?s:s.slice(0),r(s,t,u),e instanceof ImageData?a?e:new ImageData(s instanceof Uint8ClampedArray?s:new Uint8ClampedArray(s),e.width,e.height):s}var o=function(){function e(){}return e.applyTo=a,e.getCSSFilter=i,e.isDefault=n,e}();return"string"==typeof t&&Object.defineProperty(o,"name",{value:t}),o}exports.createCSSFilter=createCSSFilter;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.createCSSFilter=void 0;var utils_1=require("./utils");function createCSSFilter(e){var t=e.name,r=e.processImage,i="getCSSFilter"in e?e.getCSSFilter:function(t){return e.cssFunctionName+"("+t+e.cssFunctionValuePostfix+")"},n="isDefault"in e?e.isDefault:function(t){return e.defaultValue===t};function o(e,t,i){void 0===i&&(i={});var n=i.type,o=void 0===n?"rgba":n,a=e instanceof ImageData?e.data:e;if(a.length%utils_1.getBytesCount(o))throw new Error("Entity is corrupted. Choose another entity type or check entity itself");return r(a,t,o),e}var a=function(){function e(){}return e.applyTo=o,e.getCSSFilter=i,e.isDefault=n,e}();return"string"==typeof t&&Object.defineProperty(a,"name",{value:t}),a}exports.createCSSFilter=createCSSFilter;

dist/types.d.ts

@@ -12,10 +12,2 @@ export declare type TProcessableImage = Uint8ClampedArray | number[];
     type?: TProcessableImageType;
-    /**
-     * Should processor modify entity by its reference. If true, entity
-     * value is not cloned and will be changed by reference. You should pass
-     * true to make filter work faster because cloning entity will take some
-     * time.
-     * @default true
-     */
-    byRef?: boolean;
 }
@@ -22,0 +14,0 @@ /**

package.json

 {
   "name": "css-js-filter",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "repository": "https://github.com/wolframdeus/css-js-filter.git",
@@ -5,0 +5,0 @@ "author": "Vladislav Kibenko <[e-mail]>",

README.md

@@ -21,7 +21,7 @@ # css-js-filter
 it is required to modify image directly (means modify its pixels), then JS
-part of filter should be used. In case when the only 1 thing which is 
-required from filter is to display what will happen, when we apply via JS,
-we could use filter's CSS part.
+part of filter should be used. In case when the only 1 required thing from 
+filter is to display what will happen, when we apply it via JS,we could use 
+filter's CSS part.
 
-#### JS
+#### JavaScript / TypeScript
 
@@ -37,3 +37,3 @@ ```typescript
 
-// Get canvas image data.
+// Get canvas image data which should be modified.
 const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
@@ -75,3 +75,4 @@
 
-// Then, we should use created filter in canvas style (or any other element).
+// Then, we should use created filter in canvas style (or any other 
+// element).
 canvas.style.filter = cssFilter;
@@ -82,4 +83,29 @@
 
+Moreover, created CSS filter is compatible with canvas context's filter 
+property. Nevertheless, context's filter is not supported by some browsers.
+
+```typescript
+import {BrightnessFilter, SaturationFilter} from 'css-js-filter';
+
+const canvas = document.getElementById('canvas');
+const context = canvas.getContext('2d');
+
+// Get filter CSS representation.
+const brightnessFilter = BrightnessFilter.getCSSFilter(30);
+const saturationFilter = SaturationFilter.getCSSFilter(23);
+
+// As a result, we are getting here value "brightness(30%) saturate(23%)".
+const cssFilter = [brightnessFilter, saturationFilter].join(' ');
+context.filter = cssFilter;
+
+// Then, we should draw image or some another primitive. Pay attention to the 
+// moment, that we are not using putImageData due to this method avoids all
+// modifications and replaces pixels directly.
+const image = new Image();
+image.src = '...';
+image.onload = () => context.drawImage(image, 0, 0);
+```
+
 Of course, you could use those filters not only for canvas but the other
-html elements. It only generates a string, compatible for CSS's filter
+html elements. It only generates a string, compatible with CSS's filter
 property.
@@ -136,2 +162,3 @@
       filters.forEach(([Filter, value]) => {
+        // NOTE: To be replaced in near future. 
         assignPixel(image, i, Filter.applyTo([r, g, b], value * intensity));
@@ -138,0 +165,0 @@ });

No alert changes

Improved metrics

Total package byte prevSize

29498

increased by2.38%

Number of lines in readme file

166

increased by19.42%

Worsened metrics

Lines of code

282

decreased by-2.76%

No dependency changes