## Bagaimanakah Saya Boleh Mencapai Penskalaan Kecil Imej Pixel-Perfect dalam Kanvas HTML5?

Penskalaan Kecil Imej Kanvas HTML5

Walaupun melumpuhkan interpolasi, anda masih menghadapi kehilangan kualiti imej apabila mengecilkan imej dalam kanvas HTML5. Ini kerana penyemak imbas biasanya menggunakan teknik pensampelan turun mudah yang memperkenalkan ralat hingar dan pembundaran.

Algoritma Penskalaan Turun Pixel-Perfect

Untuk mencapai kualiti optimum, pertimbangkan untuk menggunakan piksel- algoritma penurunan skala yang sempurna. Algoritma ini memastikan bahawa setiap piksel dalam imej asal diwakili dengan tepat dalam imej yang dikecilkan, tanpa mengira faktor skala.

Pelaksanaan Penskalaan Rendah

Berikut ialah pelaksanaan JavaScript bagi algoritma penskalaan bawah pixel-perfect:

<code class="javascript">function downscaleImage(img, scale) {
    var imgCV = document.createElement('canvas');
    imgCV.width = img.width;
    imgCV.height = img.height;
    var imgCtx = imgCV.getContext('2d');
    imgCtx.drawImage(img, 0, 0);

    if (!(scale < 1) || !(scale > 0)) throw ('scale must be a positive number < 1');

    var sqScale = scale * scale;
    var sw = imgCV.width;
    var sh = imgCV.height;
    var tw = Math.floor(sw * scale);
    var th = Math.floor(sh * scale);

    var sBuffer = imgCV.getContext('2d').getImageData(0, 0, sw, sh).data;
    var tBuffer = new Float32Array(3 * tw * th);
    var sx, sy, sIndex, tx, ty, yIndex, tIndex;

    for (sy = 0; sy < sh; sy++) {
        ty = sy * scale;
        yIndex = 3 * ty * tw;

        for (sx = 0; sx < sw; sx++, sIndex += 4) {
            tx = sx * scale;
            tIndex = yIndex + tx * 3;

            var sR = sBuffer[sIndex];
            var sG = sBuffer[sIndex + 1];
            var sB = sBuffer[sIndex + 2];

            tBuffer[tIndex] += sR * sqScale;
            tBuffer[tIndex + 1] += sG * sqScale;
            tBuffer[tIndex + 2] += sB * sqScale;
        }
    }

    // Convert float array into canvas data and draw
    var resCV = document.createElement('canvas');
    resCV.width = tw;
    resCV.height = th;
    var resCtx = resCV.getContext('2d');
    var imgRes = resCtx.getImageData(0, 0, tw, th);
    var tByteBuffer = imgRes.data;

    var pxIndex;

    for (sIndex = 0, tIndex = 0; pxIndex < tw * th; sIndex += 3, tIndex += 4, pxIndex++) {
        tByteBuffer[tIndex] = Math.ceil(tBuffer[sIndex]);
        tByteBuffer[tIndex + 1] = Math.ceil(tBuffer[sIndex + 1]);
        tByteBuffer[tIndex + 2] = Math.ceil(tBuffer[sIndex + 2]);
        tByteBuffer[tIndex + 3] = 255;
    }

    resCtx.putImageData(imgRes, 0, 0);

    return resCV;
}</code>

Algoritma ini menghasilkan imej berskala rendah berkualiti tinggi, tetapi ia mahal dari segi pengiraan. Jika prestasi membimbangkan, anda boleh mempertimbangkan untuk menggunakan kaedah pensampelan yang kurang tepat tetapi lebih cepat seperti berikut:

<code class="javascript">function downscaleImageFast(img, scale) {
    var sw = img.width;
    var sh = img.height;
    var tw = Math.floor(sw * scale);
    var th = Math.floor(sh * scale);

    var resCV = document.createElement('canvas');
    resCV.width = tw;
    resCV.height = th;
    var resCtx = resCV.getContext('2d');
    resCtx.drawImage(img, 0, 0, sw, sh, 0, 0, tw, th);

    return resCV;
}</code>

Memilih Kaedah yang Betul

Kaedah terbaik untuk menurunkan skala imej bergantung pada keperluan khusus anda. Untuk hasil yang berkualiti tinggi, gunakan algoritma sempurna piksel. Walau bagaimanapun, jika prestasi adalah kritikal, kaedah pensampelan turun pantas mungkin boleh diterima.

Atas ialah kandungan terperinci ## Bagaimanakah Saya Boleh Mencapai Penskalaan Kecil Imej Pixel-Perfect dalam Kanvas HTML5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!