JavaScript 像素图片放大不失真，以及各种算法模拟放缩图片效果，

原创 已于 2025-05-02 02:58:35 修改 · 162 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

于 2025-04-29 14:44:49 首次发布

 测试代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            list-style-type: none;
        }

        .one {
            background-repeat: no-repeat;
            background-size: cover;
        }

        .result {
            width: 100%;
            border: 4px aqua solid;
            border-radius: 14px;
            text-align: center;
        }

        .result ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
            align-content: space-evenly;
        }

        .result ul li {
            position: relative;
            border: 6px aquamarine solid;
            border-radius: 12px;
            margin-right: 10px;
            margin-bottom: 10px;
            padding-top: 30px;
        }

        .result ul li .title {
            position: absolute;
            top: 0;
            left: 0;
            color: purple;
            font-weight: bold;

        }

        .result ul li .DownLoadbtn {
            position: absolute;
            bottom: 0;
            left: 50%;
            font-size: 20px;
            transform: translateX(-50%);
            color: rgb(255, 0, 162);
            font-weight: bold;
        }
    </style>
</head>

<body>
    <button onclick="openImage()">点击选择图片</button>
    <input type="file" id="imageInput" style="display:none;">
    <br><br>
    <div style="border: 4px greenyellow solid;border-radius: 10px;">

        <span style="vertical-align: top;">原始图像：</span>
        <canvas id="show" width="0" height="0"></canvas>
    </div>
    <br>
    <span>倍率：</span>
    <input type="text" id="rateInput">
    <button onclick="GetResult()">渲染</button>
    <br><br>
    <div class="result">
        <h1>不同算法渲染结果：</h1>
        <ul>
        </ul>
    </div>
    <script>
        const in1 = document.querySelector('#rateInput');
        const orginPic = new Image();
        const orginCanvas = document.querySelector('#show');
        const originalCtx = orginCanvas.getContext('2d', { willReadFrequently: true });
        const ul = document.querySelector('ul');
        let rate = 1;//放缩倍率；
        let w;//盒子宽度；
        let h;//盒子高度； 
        let originalImageData; // 获取原始图像的像素数据
        orginPic.onload = () => {
            orginCanvas.width = orginPic.width;
            orginCanvas.height = orginPic.height;
            originalCtx.drawImage(orginPic, 0, 0, orginCanvas.width, orginCanvas.height);
            // 获取原始图像的像素数据
            originalImageData = originalCtx.getImageData(0, 0, orginPic.width, orginPic.height);

        }
        function CheckIsEqual(one, two) {//特异性检测；
            let length = one.data.length;
            for (let i = 0; i < length; i++) {
                if (one.data[i] != two.data[i]) return false;
            }
            return true;
        }
        function GetResult() {//渲染按钮点击执行；
            if (orginPic.src == '') {
                alert("请先选择一张图片");
                return;
            }
            ul.innerHTML = '';
            rate = +in1.value;
            w = rate * orginPic.width;
            h = rate * orginPic.height;

            //dataMes是为了测试用的，没什么用；
            let dataMes1 = Draw();
            let dataMes2 = NearestNeighbor();
            let dataMes3 = Bilinear();
            let dataMes6 = BicubicInterpolation();
            let dataMes7 = SupersamplingAntiAliasing();

        }

        function createBtn(canvas, str) {
            const btn = document.createElement('button');
            btn.innerHTML = '下载'
            btn.classList.add('DownLoadbtn');
            btn.addEventListener('click', function () {
                canvas.toBlob((blob) => {
                    const url = URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = `${str}.png`;
                    a.click();
                    URL.revokeObjectURL(url);
                }, 'image/png');

            })
            return btn;
        }
        function openImage() {//从文件中打开图片；
            document.getElementById('imageInput').click();
            document.getElementById('imageInput').addEventListener('change', function () {
                const file = this.files[0];
                if (file && (file.type.startsWith('image/'))) {
                    const reader = new FileReader();
                    reader.onloadend = function () {
                        orginPic.src = reader.result;
                    };
                    if (file) {
                        reader.readAsDataURL(file);
                    }
                }
            });
        }
        function createLi(str) {
            let li = document.createElement('li');
            li.innerHTML = `<div class="title">${str}</div>`
            ul.append(li);
            li.style.width = w + 'px';
            li.style.height = h + 40 + 'px';



            return li;

        }
        function Draw() {
            let li = createLi('canvas: ')
            const canvas = document.createElement('canvas');
            li.appendChild(canvas);
            canvas.width = w;
            canvas.height = h;
            const rtx = canvas.getContext('2d');
            rtx.drawImage(orginPic, 0, 0, w, h);
            li.appendChild(createBtn(canvas, 'canvasDrawImg'));
            return rtx.getImageData(0, 0, w, h);
        }
        function NearestNeighbor() {
            let li = createLi('NearestNeighbor: ')
            const canvas = document.createElement('canvas');
            li.appendChild(canvas);
            canvas.width = w;
            canvas.height = h;
            const rtx = canvas.getContext('2d');

            // 调用最近邻插值缩放函数
            const scaledImageData = nearestNeighborScale(originalImageData, w, h);

            // 将缩放后的像素数据绘制到缩放后画布上
            rtx.putImageData(scaledImageData, 0, 0);
            li.appendChild(createBtn(canvas, 'NearestNeighborDrawImg'));
            return rtx.getImageData(0, 0, w, h);
        }
        function Bilinear() {
            let li = createLi('Bilinear: ')
            const canvas = document.createElement('canvas');
            li.appendChild(canvas);
            canvas.width = w;
            canvas.height = h;
            const rtx = canvas.getContext('2d');

            // 调用双线性插值缩放函数
            const scaledImageData = bilinearScale(originalImageData, w, h);

            // 将缩放后的像素数据绘制到缩放后画布上
            rtx.putImageData(scaledImageData, 0, 0);
            li.appendChild(createBtn(canvas, 'BilinearDrawImg'));

            return rtx.getImageData(0, 0, w, h);

        }
        function BicubicInterpolation() {
            let li = createLi('Bicubic-Interpolation: ')
            const canvas = document.createElement('canvas');
            li.appendChild(canvas);
            canvas.width = w;
            canvas.height = h;
            const rtx = canvas.getContext('2d');

            // BicubicInterpolation
            const scaledImageData = bicubicScale(originalImageData, w, h);

            // 将缩放后的像素数据绘制到缩放后画布上
            rtx.putImageData(scaledImageData, 0, 0);
            li.appendChild(createBtn(canvas, 'BicubicDrawImg'));

            return rtx.getImageData(0, 0, w, h);
        }
        function SupersamplingAntiAliasing() {
            let li = createLi('SSAA: ')
            const canvas = document.createElement('canvas');
            li.appendChild(canvas);
            canvas.width = w;
            canvas.height = h;
            const rtx = canvas.getContext('2d');

            // 定义超采样倍数
            const supersampleFactor = 2;
            // 创建高分辨率画布
            const supersampledCanvas = document.createElement('canvas');
            const supersampledCtx = supersampledCanvas.getContext('2d');
            supersampledCanvas.width = w * supersampleFactor;
            supersampledCanvas.height = h * supersampleFactor;

            // 将原始图像绘制到高分辨率画布上
            supersampledCtx.drawImage(orginPic, 0, 0, supersampledCanvas.width, supersampledCanvas.height);

            // 获取高分辨率画布的像素数据
            const supersampledImageData = supersampledCtx.getImageData(0, 0, supersampledCanvas.width, supersampledCanvas.height);

            // 降采样
            const scaledImageData = SSAA(supersampledImageData, w, h, supersampleFactor);

            rtx.putImageData(scaledImageData, 0, 0);
            li.appendChild(createBtn(canvas, 'SSAADrawImg'));

            return rtx.getImageData(0, 0, w, h);
        }

        //#region  最近邻插值缩放函数
        function nearestNeighborScale(imageData, newWidth, newHeight) {
            // 创建一个新的图像数据对象，用于存储缩放后的像素数据
            const newImageData = originalCtx.createImageData(newWidth, newHeight);
            // 计算水平和垂直方向的缩放比例
            const scaleX = imageData.width / newWidth;
            const scaleY = imageData.height / newHeight;

            // 遍历缩放后图像的每个像素
            for (let y = 0; y < newHeight; y++) {
                for (let x = 0; x < newWidth; x++) {
                    // 计算目标像素在原始图像中对应的位置
                    const srcX = Math.floor(x * scaleX);
                    const srcY = Math.floor(y * scaleY);
                    // 计算目标像素在原始图像数据数组中的索引
                    const srcIndex = (srcY * imageData.width + srcX) * 4;
                    // 计算目标像素在新图像数据数组中的索引
                    const destIndex = (y * newWidth + x) * 4;

                    // 将原始图像中对应像素的颜色值复制到新图像数据中
                    newImageData.data[destIndex] = imageData.data[srcIndex];
                    newImageData.data[destIndex + 1] = imageData.data[srcIndex + 1];
                    newImageData.data[destIndex + 2] = imageData.data[srcIndex + 2];
                    newImageData.data[destIndex + 3] = imageData.data[srcIndex + 3];
                }
            }

            return newImageData;
        }
        //#endregion

        //#region  双线性插值缩放函数
        function bilinearScale(imageData, newWidth, newHeight) {
            // 创建一个新的图像数据对象，用于存储缩放后的像素数据
            const newImageData = originalCtx.createImageData(newWidth, newHeight);
            // 计算水平和垂直方向的缩放比例
            const scaleX = imageData.width / newWidth;
            const scaleY = imageData.height / newHeight;

            // 遍历缩放后图像的每个像素
            for (let y = 0; y < newHeight; y++) {
                for (let x = 0; x < newWidth; x++) {
                    // 计算目标像素在原始图像中对应的浮点坐标
                    const srcX = x * scaleX;
                    const srcY = y * scaleY;
                    // 计算四个相邻像素的坐标
                    const x0 = Math.floor(srcX);
                    const y0 = Math.floor(srcY);
                    const x1 = Math.min(x0 + 1, imageData.width - 1);
                    const y1 = Math.min(y0 + 1, imageData.height - 1);

                    // 计算插值因子
                    const dx = srcX - x0;
                    const dy = srcY - y0;

                    // 获取四个相邻像素的颜色值
                    const c00 = getPixelColor(imageData, x0, y0);
                    const c01 = getPixelColor(imageData, x0, y1);
                    const c10 = getPixelColor(imageData, x1, y0);
                    const c11 = getPixelColor(imageData, x1, y1);

                    // 对每个颜色通道进行双线性插值
                    const r = bilinearInterpolation(c00.r, c10.r, c01.r, c11.r, dx, dy);
                    const g = bilinearInterpolation(c00.g, c10.g, c01.g, c11.g, dx, dy);
                    const b = bilinearInterpolation(c00.b, c10.b, c01.b, c11.b, dx, dy);
                    const a = bilinearInterpolation(c00.a, c10.a, c01.a, c11.a, dx, dy);

                    // 计算目标像素在新图像数据数组中的索引
                    const destIndex = (y * newWidth + x) * 4;
                    // 将插值后的颜色值赋值给新图像数据
                    newImageData.data[destIndex] = r;
                    newImageData.data[destIndex + 1] = g;
                    newImageData.data[destIndex + 2] = b;
                    newImageData.data[destIndex + 3] = a;
                }
            }

            return newImageData;
        }

        // 获取指定位置像素的颜色值
        function getPixelColor(imageData, x, y) {
            const index = (y * imageData.width + x) * 4;
            return {
                r: imageData.data[index],
                g: imageData.data[index + 1],
                b: imageData.data[index + 2],
                a: imageData.data[index + 3]
            };
        }

        // 双线性插值计算
        function bilinearInterpolation(c00, c10, c01, c11, dx, dy) {
            const r0 = (1 - dx) * c00 + dx * c10;
            const r1 = (1 - dx) * c01 + dx * c11;
            return (1 - dy) * r0 + dy * r1;
        }
        //#endregion

        //#region 双三次插值
        function bicubicScale(imageData, newWidth, newHeight) {
            const newImageData = originalCtx.createImageData(newWidth, newHeight);
            const scaleX = imageData.width / newWidth;
            const scaleY = imageData.height / newHeight;

            for (let y = 0; y < newHeight; y++) {
                for (let x = 0; x < newWidth; x++) {
                    const srcX = x * scaleX;
                    const srcY = y * scaleY;
                    const r = bicubicInterpolate(imageData, srcX, srcY, 0);
                    const g = bicubicInterpolate(imageData, srcX, srcY, 1);
                    const b = bicubicInterpolate(imageData, srcX, srcY, 2);
                    const a = bicubicInterpolate(imageData, srcX, srcY, 3);

                    const destIndex = (y * newWidth + x) * 4;
                    newImageData.data[destIndex] = r;
                    newImageData.data[destIndex + 1] = g;
                    newImageData.data[destIndex + 2] = b;
                    newImageData.data[destIndex + 3] = a;
                }
            }

            return newImageData;
        }

        function bicubicInterpolate(imageData, x, y, channel) {
            const x0 = Math.floor(x);
            const y0 = Math.floor(y);
            let result = 0;

            for (let j = -1; j <= 2; j++) {
                for (let i = -1; i <= 2; i++) {
                    const px = Math.min(Math.max(x0 + i, 0), imageData.width - 1);
                    const py = Math.min(Math.max(y0 + j, 0), imageData.height - 1);
                    const weightX = cubicInterpolation(x - px);
                    const weightY = cubicInterpolation(y - py);
                    const index = (py * imageData.width + px) * 4 + channel;
                    const value = imageData.data[index];
                    result += value * weightX * weightY;
                }
            }

            return Math.min(255, Math.max(0, Math.round(result)));
        }

        function cubicInterpolation(t) {
            const a = -0.5;
            const absT = Math.abs(t);
            if (absT <= 1) {
                return (a + 2) * Math.pow(absT, 3) - (a + 3) * Math.pow(absT, 2) + 1;
            } else if (absT < 2) {
                return a * Math.pow(absT, 3) - 5 * a * Math.pow(absT, 2) + 8 * a * absT - 4 * a;
            }
            return 0;
        }
        //#endregion

        //#region SSAA算法；
        function SSAA(supersampledImageData, newWidth, newHeight, supersampleFactor) {
            const newImageData = originalCtx.createImageData(newWidth, newHeight);
            const blockSize = supersampleFactor * supersampleFactor;

            for (let y = 0; y < newHeight; y++) {
                for (let x = 0; x < newWidth; x++) {
                    let rSum = 0;
                    let gSum = 0;
                    let bSum = 0;
                    let aSum = 0;

                    for (let j = 0; j < supersampleFactor; j++) {
                        for (let i = 0; i < supersampleFactor; i++) {
                            const srcX = x * supersampleFactor + i;
                            const srcY = y * supersampleFactor + j;
                            const index = (srcY * supersampledImageData.width + srcX) * 4;

                            rSum += supersampledImageData.data[index];
                            gSum += supersampledImageData.data[index + 1];
                            bSum += supersampledImageData.data[index + 2];
                            aSum += supersampledImageData.data[index + 3];
                        }
                    }

                    const destIndex = (y * newWidth + x) * 4;
                    newImageData.data[destIndex] = Math.round(rSum / blockSize);
                    newImageData.data[destIndex + 1] = Math.round(gSum / blockSize);
                    newImageData.data[destIndex + 2] = Math.round(bSum / blockSize);
                    newImageData.data[destIndex + 3] = Math.round(aSum / blockSize);
                }
            }

            return newImageData;
        }
        //#endregion

    </script>
</body>

</script>
</body>

</html>

运行效果如下图所示：

可以明显看到NearestNeighbor算法，对放大像素图，不失真，效果很好；

Luna-player
关注
canvas实现图片像素化（可调整像素大小、替换图片）
stay hungry, stay foolish
08-15 1235
通过调整像素大小实现图片像素化效果，也可以对图片进行替换。通过 Canvas 的 getImageData方法获取图片的像素数据。
javascript 实现对图片不失真的缩放
06-03 4706
最新javascript自动按比例显示图片，按比例压缩图片显示 function AutoResizeImage(maxWidth,maxHeight,objImg){ var img = new Image(); img.src = objImg.src; var hRatio; var wRatio; var Ratio = 1; va...
js控制图片缩放 不失真 获取图片真实长和宽
04-29
1--控制一张图片等比例缩放容易 ，不失真 2--控制多张图片切换时每张图片保持等比例缩放，不失真
前端怎样让图片缩小像素值不失真_发表SCI论文，图片处理技巧要掌握！
weixin_39527768的博客
12-05 1606
科学论文中,图片占有重要的地位,可以说是论文是否被接受的关键之一。文字有点长，但请务必耐心看完……01文章中的图片操作的三大原则1)原始图像要保留,修改后的图像务必另存而不要覆盖原始图像;2)尽量减少保存次数,以免损失图像质量,可以多处修改一一完毕后再做存盘;3)所有操作不得使图像失真,任何影响图像真实性的修改都是不允许的。02拼图要求不可能直接在原始图片上做上述修改,一般都要将若干张图...
前端vue解决图片在不同设备上不失真问题
weixin_43444977的博客
11-11 1014
比如图片的长度为690px;宽度为412px；需要在不同设备上不失真。 照片的宽度可以直接设置为百分数，可以自动随屏幕变化而变化； 高度需要计算一下。 准备工作： 获取屏幕的长宽： Vue.prototype.$getView = function(){ return { width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,//兼容性获取屏幕宽度 hei
实现京东商品展示的图片放大效果教程
京东商品图片放大效果通常指的是在用户操作下，商品图片能够局部或全局放大，且不会失真。这种效果通常需要利用前端技术如JavaScript、CSS3以及HTML5等技术实现。 ### 2. 京东商品图片放大效果的技术实现 #### 2.1...
前端图像处理技术：浏览器中的高效图片处理实战指南
本文详细探讨了前端图像处理的基础理论和实践方法，包括像素操作、图像格式转换、裁剪与缩放技术，以及图像增强与特效的实现。同时，本文还提供了关于前端图像处理性能优化的策略，如图像加载与缓存、Canvas性能优化...
【图片优化终极指南】：Web性能与Sprite.zip的深度剖析
![【图片优化终极指南】：Web性能与Sprite.zip的深度剖析]...随着互联网的高速发展，Web性能优化已成为提升用户体验的关键因素，而图片优化是其中的核心组成部分。本文系统地探讨了图
【坐标点与图像裁剪最佳实践】：算法在图像处理中的神奇作用
首先，介绍了坐标系统在图像处理中的作用，包括坐标点的定义及其在图像中的表示，以及不同坐标系统的转换原理。接着，阐述了图像裁剪的基本概念、目的以及裁剪方法的分类。通过研究实际案例，本文分析了基于坐标的...
下载完整2维矢量图形软件源代码分享
它使用数学公式来记录图形的形状和位置，因此具有无限放缩而不失真的特性。这与像素图形（位图）不同，像素图形是由固定数量的像素点组成的，放大后会出现锯齿和模糊。 #### 2. 2D矢量图形软件核心功能 一个二维...
图片按指定尺寸展示（不失真）
weixin_43837268的博客
12-20 2511
.tab_item img{ width:123px; height: 94px; object-fit: cover; border-radius: 2px; }  
不让图片失真，使大小不一的图片整齐排列！
illusion_melody的博客
06-09 4428
作为前端er,肯定碰到过将一组要将一组图标整齐排列的问题，图片一样大还好，不一样大的话，没经验还真是烦人呢。 如图，排列不整齐美观。为了方便你我他，我加了边框 如果粗暴的把图片设置为一样大小，那图片会失去原有比例，导致伸缩，不雅。一个一个调整也不靠谱。 如何是好。其实很简单，在给4个图片外面分别加个一样大小的div，然后让图片居中就好啦。   div { border: 1px ...
纹理优化：不仅仅是一张图片那么简单
UWA—简单优化，优化简单！
10-28 546
在上期《网格优化：溃堤之穴，一个也不能放过》中，我们对网格相关的优化知识点做了讲解。无论是大家在开发时的疏忽，还是对相关知识点的理解不足，这些问题的积累最终都会反映到项目的性能表现上。为此，我们将这些规则列出，并且以一个个知识点的形式逐一解读。 本期我们聚焦纹理相关的优化，以UWA本地资源检测中“包含无效透明通道的纹理”、“过滤模式为Trilinear的纹理”和“开启Read/Write选项的纹理”这三条规则，来为大家简单说明相关的优化要点。我们将力图以浅显易懂的表达，让职场萌新或优化萌新深入理解。 1
（前端）图片如何从模糊到清晰渐显
dream0129的博客
09-20 3320
在写页面过程中，难免会遇到一些大图，即使压缩过后，依然加载速度缓慢。为了解决这个问题，我查找了一下资料： 发现有一种图片格式叫做交错式 Photoshop 保存PNG格式交错和不交错的差别： 1.PNG格式是由Netscape公司开发出来的格式，可以用于网络图像，但它不同于GIF格式图像只能保存256色，PNG格式可以保存24位的真彩色图像，并且支持透明背景和消除锯齿边缘的功能，可以在不失...
前端小知识----如何100%宽度显示图片，高度自动不失真
06-29 4335
<!-- 我们将img css样式宽度设置为100% height为自动。 将overflow设置为hidden; imgbox不要给高度，设置为overflow:auto。图像就不再失真 请根据页面合理使用。。 --> .imgbox{overflo
我是如何处理图片大小的（不失真）！
qq_18437643的博客
09-14 7310
本人小菜鸟一枚，第一次写博文，由于自己技术菜菜，就不写技术之类的了怕写出来挨一顿批，嘿嘿，还是分享一个自己处理图片的方法吧（这里指的是图片文件的大小不失真）。 想必在开发的时候，最头疼的就是图片了，臭名昭著的OOM大部分是加载大图片造成的,当然现在成熟的第三方图片加载框架那么多，但是图片太大势必会增加APK安装包的大小，这里我不说怎么样怎么样用代码去压缩之类的，那种百度一搜一箩筐，我想分享的是利
css img图片按比例缩小，保持图片不失真
热门推荐
小武的博客
09-08 1万+
css加上属性： object-fit: fill; object-fit: contain; object-fit: scale-down; 这样就可以了
html5新特性以及如何避免图片在网页上失真
m0_66783294的博客
05-13 1053
html5新特性以及如何避免图片在网页上失真
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值