做网站用多大配置的服务器,上海可以做网站的公司,公众号如何开通,制作流程图软件利用摄像头每一秒截图一次图像。然后计算2次图像之间的相似度。
如果相似度低于98%就会报警。
var video document.getElementsByClassName(inputvideo)[0];
video.innerHTML video classinput_video idcamera autoplay width640px height380px/video document.getElementsByClassName(inputvideo)[0];
video.innerHTML video classinput_video idcamera autoplay width640px height380px/video;const videoElement document.getElementById(camera);// 获取用户媒体设备摄像头
navigator.mediaDevices.getUserMedia({ video: true }).then(function (stream) {videoElement.srcObject stream;}).catch(function (error) {console.error(获取摄像头失败:, error);});var canvas document.getElementsByClassName(outputcanvas)[0];
canvas.innerHTML canvas classoutput_canvas width640px height480px/canvas;var canvasElement document.getElementsByClassName(output_canvas)[0];
var canvasCtx canvasElement.getContext(2d);// 设置 canvas 尺寸与视频流尺寸一致
canvasElement.width 64;
canvasElement.height 64;
var last 0function captureFrame() {// 捕获图像并绘制到画布canvasCtx.drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height);// 获取绘制后的图像数据const imageData canvasCtx.getImageData(0, 0, canvasElement.width, canvasElement.height);// 压缩图像并将其绘制到目标画布上const compressedImageDataPromise compressImgFromImageData(imageData);// 处理压缩后的图像数据compressedImageDataPromise.then(function (compressedData) {// 在这里可以使用 compressedData 进行进一步的操作例如上传或显示在页面上// 清空画布canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);// 转换为灰度图像const grayscaleImageData createGrayscale(compressedData);// 获取哈希指纹const hashFingerprint getHashFingerprint(grayscaleImageData);// 判断 last 是否等于 hashFingerprintif (last ! 0) {if (last hashFingerprint) {console.log(你没动);} else {// console.log(你动了 last);// 计算汉明距离const distance hammingDistance(last, hashFingerprint);// 计算相似度百分比const similarityPercentage (1 - distance / (hashFingerprint.length * 2)) * 100;// console.log(汉明距离:, distance);const baifenbisimilarityPercentage.toFixed(2);console.log(相似度百分比:, baifenbi %);if (baifenbi98){_funcCb (true, {param1: true})}_funcCb (true, {param2: baifenbi})}}last hashFingerprint// console.log(哈希指纹:, hashFingerprint);// 在画布上绘制灰度图像canvasCtx.putImageData(grayscaleImageData, 0, 0);});
}// 每隔一段时间捕获一帧
setInterval(captureFrame, 1000); // 1 帧每秒// 定义压缩图像的函数
function compressImgFromImageData(imageData) {const canvas document.createElement(canvas);const ctx canvas.getContext(2d);const imgWidth 64; // 设置压缩后的宽度canvas.width imgWidth;canvas.height imgWidth;// 将图像数据绘制到临时 canvas 上ctx.putImageData(imageData, 0, 0);// 获取压缩后的图像数据return new Promise((resolve, reject) {const imgData ctx.getImageData(0, 0, imgWidth, imgWidth);resolve(imgData);});
}// createGrayscale 函数已经在之前的代码中定义
// 根据 RGBA 数组生成 ImageData
function createImgData(dataDetail) {const canvas document.createElement(canvas);const ctx canvas.getContext(2d);const imgWidth Math.sqrt(dataDetail.length / 4);const newImageData ctx.createImageData(imgWidth, imgWidth);for (let i 0; i dataDetail.length; i 4) {let R dataDetail[i];let G dataDetail[i 1];let B dataDetail[i 2];let Alpha dataDetail[i 3];newImageData.data[i] R;newImageData.data[i 1] G;newImageData.data[i 2] B;newImageData.data[i 3] Alpha;}return newImageData;
}// 创建灰度图像
function createGrayscale(imgData) {const newData Array(imgData.data.length).fill(0);imgData.data.forEach((_data, index) {if ((index 1) % 4 0) {const R imgData.data[index - 3];const G imgData.data[index - 2];const B imgData.data[index - 1];const gray ~~((R G B) / 3);newData[index - 3] gray;newData[index - 2] gray;newData[index - 1] gray;newData[index] 255; // Alpha 值固定为255}});return createImgData(newData);
}// 获取图像的哈希指纹
function getHashFingerprint(imgData) {const grayList imgData.data.reduce((pre, cur, index) {if ((index 1) % 4 0) {pre.push(imgData.data[index - 1]);}return pre;}, []);const length grayList.length;const grayAverage grayList.reduce((pre, next) pre next, 0) / length;return grayList.map(gray (gray grayAverage ? 1 : 0)).join();
}// 计算汉明距离
function hammingDistance(hash1, hash2) {if (hash1.length ! hash2.length) {throw new Error(Hashes must have the same length);}let distance 0;for (let i 0; i hash1.length; i) {if (hash1[i] ! hash2[i]) {distance;}}return distance;
}原理是看了有一篇文章
利用 JS 实现多种图片相似度算法
首先降低图片分辨率 然后使用指纹提取
在“平均哈希算法”中若灰度图的某个像素的灰度值大于平均值则视为1否则为0。把这部分信息组合起来就是图片的指纹。由于我们已经拿到了灰度图的 ImageData 对象要提取指纹也就变得很容易了 最后用汉明距离计算相似度
摘一段维基百科关于“汉明距离”的描述 在信息论中两个等长字符串之间的汉明距离英语Hamming distance是两个字符串对应位置的不同字符的个数。换句话说它就是将一个字符串变换成另外一个字符串所需要替换的字符个数。 例如 1011101与1001001之间的汉明距离是2。2143896与2233796之间的汉明距离是3。toned与roses之间的汉明距离是3。 体验地址
不许动
