Commit 62fe7777 authored by Winsley's avatar Winsley

Added simple ui to generate perceptual image hashes

parent 30accaea
Pipeline #40586843 failed with stage
image: docker:10
pages:
script:
- npm install
- npm run bundle
artifacts:
paths:
- index.html
- index.js
- blockhash.js
<!DOCTYPE HTML>
<html lang = "en">
<head>
<meta charset="utf-8"/>
<title>Foo</title>
<style>
<!--
form {
display:block;
width:500px;
}
form label {
width: 150px;
float:left;
display: block;
clear:both;
}
form input {
float:left;
display: block;
}
canvas {
display: block;
float:left;
clear:both;
}
-->
</style>
</head>
<body>
<script src="blockhash.js"></script>
<form>
<label for='image'>Image</label>
<input type='file' id='image' />
<label for='selection'>Selection</label>
<input type='text' id='selection' />
<label for='result'>Result</label>
<input type='text' id='result' />
</form>
<canvas id='canvas' />
<script src="index.js"></script>
</body>
</html>
function handleForm(form) {
let image = form.querySelector('#image');
let handler = (ev) => {
console.log('handler');
let reader = new FileReader();
reader.onload = (ev) => {
let imageElement = new Image();
imageElement.onload = () => {
let canvas = document.querySelector('#canvas');
let selection =
(document.querySelector('#selection').value || '').split('x');
let sX = selection[0] || 0;
let sY = selection[1] || 0;
let sWidth = selection[2] || imageElement.width;
let sHeight = selection[3] || imageElement.height;
console.log(selection, sX, sY, sWidth, sHeight);
canvas.width = sWidth;
canvas.height = sHeight;
let context = canvas.getContext('2d');
context.drawImage(
imageElement, sX, sY, sWidth, sHeight, 0, 0, sWidth, sHeight);
let imageData = context.getImageData(0, 0, sWidth, sHeight);
let result = form.querySelector('#result');
result.value = blockhashjs.blockhashData(imageData, 8, 2);
};
imageElement.src = ev.target.result;
};
reader.readAsDataURL(ev.target.files[0]);
};
image.addEventListener('change', handler , false);
}
handleForm(document.querySelectorAll('form')[0]);
This diff is collapsed.
{
"name": "percippet",
"version": "0.1.0",
"description": "Crude fronted to generate perceptional hashes to use with the abp perceptional snippet filter",
"main": "index.js",
"scripts": {
"build": "browserify node_modules/blockhash/index.js --standalone blockhashjs > blockhash.js"
},
"dependencies": {
"blockhash": "^0.2.0"
},
"devDependencies": {
"browserify": "^16.2.3"
}
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment