Merge pull request #24 from KnicKnic/browser-test

Browser test

.gitignore

@@ -4,5 +4,6 @@
 /samples/rotate/magickApi.js
 /tests/rotate/node.js
 node_modules
-sample-nodejs-project
 /dist
+*.tgz
+/magickApi.js

.npmignore

@@ -2,6 +2,11 @@
 *
 
 # But not these files...
-!.LICENSE
-!.Readme.md
-!/dist/*
+!/LICENSE
+!/Readme.md
+!/dist/**/*
+
+# ignore these in /dist:
+/dist/assets/**/*
+/dist/spec/**/
+/dist/bundle.js

Readme.md

@@ -1,18 +1,10 @@
 # Web assembly ImageMagick [![Build Status](https://dev.azure.com/oneeyedelf1/wasm-imagemagick/_apis/build/status/KnicKnic.WASM-ImageMagick)](https://dev.azure.com/oneeyedelf1/wasm-imagemagick/_build/latest?definitionId=1)
 This project is not affiliated with [ImageMagick](https://www.imagemagick.org) , but is merely recompiling the code to be [WebAssembly](https://webassembly.org/). I did this because I want to bring the power of ImageMagick to the browser.
 
-## Simple Sample
-see [samples/rotate#code](samples/rotate#code)
 
-A simple webpage that has image in array and loads magickApi.js to rotate file
+## Demos and examples
 
-Demonstration site [https://knicknic.github.io/imagemagick/rotate/](https://knicknic.github.io/imagemagick/rotate/)
-
-## Status
-
-Supports PNG, TIFF, JPEG, + Native ImageMagick such as BMP, GIF, [PhotoShop](https://www.adobe.com/products/photoshop.html), [GIMP](https://www.gimp.org/)
-
-## Demos
+ * Simple example. See [samples/rotate#code](samples/rotate#code). A simple webpage that has image in array and loads magickApi.js to rotate file. Demonstration site [https://knicknic.github.io/imagemagick/rotate/](https://knicknic.github.io/imagemagick/rotate/)
 
  * [https://knicknic.github.io/imagemagick/](https://knicknic.github.io/imagemagick/) a commandline sample of using ImageMagick
     * For code see [samples/cmdline](samples/cmdline)
@@ -28,19 +20,29 @@ Supports PNG, TIFF, JPEG, + Native ImageMagick such as BMP, GIF, [PhotoShop](htt
 
  * [Picture Frame editor](https://cancerberosgx.github.io/autumn-leaves/#/imageFrame).
 
+
+## Status
+
+### Image formats supported
+
+Supports PNG, TIFF, JPEG, + Native ImageMagick such as BMP, GIF, [PhotoShop](https://www.adobe.com/products/photoshop.html), [GIMP](https://www.gimp.org/)
+
+### Features **not** supported 
+
+ * [Text](https://www.imagemagick.org/Usage/text/)
+ * [Fourier Transforms](https://www.imagemagick.org/Usage/fourier/)
+
+
 ## Usage with npm
 
 ```sh
 npm install --save wasm-imagemagick
 ```
 
-Use it:
+Use the low-level `Call()` API:
 
 ```js
-import * as Magick from 'wasm-imagemagick'
-
-// the image element where to load output images
-const outputImage = document.getElementById('rotatedImage')
+import { Call } from 'wasm-imagemagick'
 
 // fetch the input image and get its content bytes
 const fetchedSourceImage = await fetch("rotate.png")
@@ -49,13 +51,15 @@ const sourceBytes = new Uint8Array(await fetchedSourceImage.arrayBuffer());
 // calling ImageMagick with one source image, and command to rotate & resize image
 const inputFiles = [{ 'name': 'srcFile.png', 'content': sourceBytes }]
 const command = ["convert", "srcFile.png", '-rotate', '90', '-resize', '200%', 'out.png']
-const processedFiles = await Magick.Call(inputFiles, command)
+const processedFiles = await Call(inputFiles, command)
 
 // response can be multiple files (example split) here we know we just have one
 const firstOutputImage = processedFiles[0]
+
+// create a html image element to show the output image:
+const outputImage = document.getElementById('rotatedImage')
 outputImage.src = URL.createObjectURL(firstOutputImage.blob)
 console.log('created image ' + firstOutputImage.name)
-
 ```
 
 And **don't forget to copy `magick.wasm` and `magick.js`** files to the folder where index.html is being served:
@@ -67,14 +71,32 @@ cp node_modules/wasm-imagemagick/dist/magick.js .
 
 You can then use browserify, tsc, webpack, rollup, etc to build a bundle.js file from previous example.
 
-## Using it directly
+### High level API and utilities
+
+`wasm-imagemagick` comes with some easy to use APIs for creating image files from urls, executing multiple commands reusing output imges and nicer command syntax, and utilities to handle html images, image comparission, metadata extraction,  etc. The following example is equivalent to the previous using these APIs: 
+
+```ts
+import { buildInputFile, execute, loadImageElement } from 'wasm-imagemagick'
+
+const {outputFiles} = await execute({
+  inputFiles: [await buildInputFile('http://some-cdn.com/foo/fn.png', 'image1.png')],
+  commands: [
+    'convert image1.png -rotate 70 image2.gif',
+    // heads up: the next command uses 'image2.gif' which was the output of previous command:
+    'convert image2.gif -scale 23% image3.jpg',
+  ],
+})
+await loadImageElement(outputFiles[0], document.getElementById('transformedImage'))
+```
+
+## Using it directly from the HTML file
 
 If you are not working in a npm development environment you can still load the library with the following code by placing these three files next to your index.html: `magick.js`, `magick.wasm` and `magickApi.js` : 
 
 ```js
 <script type="module">
 import * as Magick from './magickApi.js'
-// ...
+// ... same snippet as before
 </script>
 ```
 
@@ -96,9 +118,10 @@ import * as Magick from './magickApi.js'
 
 For working sample code see [samples/rotate](samples/rotate)
 
+
 ## Build instructions
 
-```
+```sh
 git clone --recurse-submodules https://github.com/KnicKnic/WASM-ImageMagick.git
 
 cd WASM-ImageMagick
@@ -109,7 +132,15 @@ docker run --rm -it --workdir /code -v "$PWD":/code wasm-imagemagick-build-tools
 
 #windows cmd
 #docker run --rm -it --workdir /code -v %CD%:/code wasm-imagemagick-build-tools bash ./build.sh
-
 ```
 
-Produces `magick.js` & `magick.wasm` in the current folder. Along with `magickApi.js` that is all the files needed on the webserver.
+Produces `magick.js` & `magick.wasm` in the current folder.
+
+Note: `npm run build` will perform all the previous commands plus compiling the TypeScript project.
+
+
+## Run tests
+
+`npm test` will run some tests with nodejs located at `./tests/rotate`.
+
+`npm run test-browser` will run spec in a headless chrome browser. This tests are located at `./spec/`.

azure-pipelines.yml

@@ -7,21 +7,35 @@ pool:
   vmImage: 'Ubuntu 16.04'
 
 steps:
+
 - script: |
-    sudo npm install -g typescript
-  displayName: install typescript
+   echo "original node version `node -v`" 
+   echo "original npm version `npm -v`"
+   sudo npm i -g n    
+   sudo n latest
+   echo "installed latest node version `node -v`"
+   echo "installed latest npm version `npm -v`" 
+  displayName: install node latest
 
-- script: npm run build
-  displayName: run npm based build
+- script: |
+   echo "npm install with node version `node -v`"
+   echo "npm install with npm version `npm -v`" 
+   npm install
+  displayName: npm install
 
 # - script: |
 #    cd tests/rotate
 #    docker run -v "$PWD":/code --rm --workdir /code node node  /code/node.js
 #  displayName: test wasm with nodejs
 
-- script: npm run test 
+- script: npm test
   displayName: run tests
 
+
+- script: npm run test-browser
+  displayName: run tests in browser
+
+
 - script: cp magick* $(Build.ArtifactStagingDirectory)
   displayName: cp magick files to artifact staging directory