Comparing images typescript react sharpoint framework

Question

I am having a problem trying to compare two images with each other. One image is saved locally in my project and the second picture is on the internet (url). I tried putting the image into "variable" and compare it with the second image that would be also stored into "variable".

let temp_img = fetch(url,{method: "GET", headers: {}}).then(response => {
     result = response;
});
let local_img = new File(path,"local_img");

if( temp_img == local_img)
....

I always get the same result that images are not identical (but they are). What am I doing wrong?

Baker_Kong · Accepted Answer · 2020-11-27 07:32:41Z

You can take advantage of some js libraries to compare images.

Ex. Rembrandt.JS is an image comparison library that works both with the HTML5 Canvas2D API as well as the drop-in Node.JS replacement node-canvas.

https://github.com/imgly/rembrandt

import Rembrandt from 'rembrandt' 

const rembrandt = new Rembrandt({
// `imageA` and `imageB` can be either Strings (file path on node.js,
// public url on Browsers) or Buffers
imageA: '/path/to/imageA',
imageB: fs.readFileSync('/path/to/imageB'),

// Needs to be one of Rembrandt.THRESHOLD_PERCENT or Rembrandt.THRESHOLD_PIXELS
thresholdType: Rembrandt.THRESHOLD_PERCENT,

// The maximum threshold (0...1 for THRESHOLD_PERCENT, pixel count for THRESHOLD_PIXELS
maxThreshold: 0.01,

// Maximum color delta (0...1):
maxDelta: 0.02,

// Maximum surrounding pixel offset
maxOffset: 0,

renderComposition: true, // Should Rembrandt render a composition image?
compositionMaskColor: Rembrandt.Color.RED // Color of unmatched pixels
})

// Run the comparison
rembrandt.compare()
.then(function (result) {
 console.log('Passed:', result.passed)
 console.log('Pixel Difference:', result.differences, 'Percentage Difference', result.percentageDifference, '%')
 console.log('Composition image buffer:', result.compositionImage)

 // Note that `compositionImage` is an Image when Rembrandt.js is run in the browser environment
 })
 .catch((e) => {
 console.error(e)
 })

Akshay Randive · Accepted Answer · 2020-07-01 16:10:21Z

1

You convert them to base64 format and then compare the output.

answered Jul 1, 2020 at 16:10

Akshay Randive

2,8851 gold badge18 silver badges31 bronze badges

Add a comment |

Stack Exchange Network

Comparing images typescript react sharpoint framework

2 Answers 2

Your Answer

Hot Network Questions

Comparing images typescript react sharpoint framework

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions