javascript - 如何更改图像质量

Question

设置图像质量/dpi的参数

我有一个特定像素大小的图像。在保存它之前，我需要降低它的质量（不改变它的像素大小）。

我将图像发送到以下功能。如果我想将质量降低到 87% - 我该怎么做？

function defineNewImgFile(image) {

    let imgBlob = base64ImageToBlob(image);

    let newFile = new File([imgBlob], image, {
        type: typeOfImg
    });
    return newFile;
}

//changes base64 format
let typeOfImg;

function base64ImageToBlob(str) {
    let pos = str.indexOf(';base64,');
    let type = str.substring(5, pos);
    typeOfImg = type;
    let b64 = str.substr(pos + 8);

    let imageContent = atob(b64);

    let buffer = new ArrayBuffer(imageContent.length);
    let view = new Uint8Array(buffer);

    for (let n = 0; n < imageContent.length; n++) {
        view[n] = imageContent.charCodeAt(n);
    }

    let blob = new Blob([view], {
        type: type
    });

    return blob;
}

Answer 1

对于图像压缩，您可以使用Sharp

Answer 2

尝试这个：

Javascript函数代码

var yourImg = document.getElementById('yourImgId');
if(yourImg && yourImg.style) {
    yourImg.style.height = '100px';
    yourImg.style.width = '200px';
}

前端代码：

<img src="src/to/your/img.jpg" id="yourImgId" alt="alt tags are key!"/>