JavaScript 有什么图片压缩或者提取差异化部分算法吗？

ppgjx

我想做个浏览器屏幕共享，使用websocket，无非就是截图+传送，但是图片太大了，我了解了一下微软的远程桌面，他好像只是传输两张图片的差异部分，但这个算法是怎么原理呢？

T4DNA

https://b23.tv/72LfcqJ
这种吗

d199212

base64对比？

Vvvvvoid

有一些显卡 渲染帧数 也有类似的算法优化

jasonz18

用 Perceptual hashing 这种方法创建图像哈希值，让相似的图像具有相似的哈希。这样就可以比较两个图像的哈希值，确定它们之间的差异。随便写点代码实现：

// 计算dHash
function dhash(imageData, hashSize = 8) {
    // 将图像缩小为hashSize x (hashSize + 1)的尺寸，确保宽度为hashSize
    const resizedImageData = resizeImage(imageData, hashSize, hashSize + 1);

    // 将图像转换为灰度
    const grayImageData = convertToGrayscale(resizedImageData);

    // 计算像素差异
    const differences = calculateDifferences(grayImageData);

    // 生成哈希值
    const hash = generateHash(differences);

    return hash;
}

// 将图像缩小到指定尺寸
function resizeImage(imageData, width, height) {
    // 省略实现细节，可以使用canvas等方法进行图像缩放
    // 返回缩小后的图像数据
}

// 将图像转换为灰度
function convertToGrayscale(imageData) {
    // 省略实现细节，可以使用canvas等方法进行灰度转换
    // 返回灰度图像数据
}

// 计算相邻像素的差异
function calculateDifferences(imageData) {
    const differences = [];
    // 省略实现细节，计算相邻像素的差异并保存到数组中
    return differences;
}

// 生成哈希值
function generateHash(differences) {
    // 根据差异数组生成哈希值
    const hash = differences.map(diff => (diff < 0 ? '0' : '1')).join('');
    return hash;
}

// 示例用法
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// 假设有一个Image对象或者ImageData对象，你可以将其绘制到canvas上
// 并且使用getImageData获取图像数据
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

// 计算哈希
const hash = dhash(imageData);

console.log('Perceptual hash:', hash);