我的编程空间,编程开发者的网络收藏夹
学习永远不晚

JavaScript canvas实现镜像图片效果

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

JavaScript canvas实现镜像图片效果

本文实例为大家分享了JavaScript canvas实现镜像图片效果的具体代码,供大家参考,具体内容如下


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Using image</title>
        <style type="text/css">
            * {
                
                box-sizing: border-box;
            }
            canvas {
                
            }
        </style>
    </head>
    <body>
        <canvas id="canvas"></canvas>
        <canvas id="mirror"></canvas>
        
        <div>
            <input type="file" accept="image/*" />
        </div>
        
        <script type="text/javascript">
            window.onload = (event) => {
                main()
            }
            
            function main() {
                const canvas = document.getElementById("canvas");
                const mirror = document.getElementById("mirror");
                const ctx = canvas.getContext("2d");
                const mirrorCtx = mirror.getContext("2d");
                
                const inputFile = document.querySelector("input[type=file]");
                inputFile.onchange = (event) => {
                    const files = event.target.files;
                    if (files.length > 0) {
                        const file = files[0]; // First file
                        console.log(file);
                        
                        const image = new Image();
                        image.class="lazy" data-src = URL.createObjectURL(file);
                        image.onload = function(event) {
                            // console.log(event, this);
                            URL.revokeObjectURL(this.class="lazy" data-src);
                            
                            canvas.width = image.width;
                            canvas.height = image.height;
                            mirror.width = image.width;
                            mirror.height = image.height;
                            
                            ctx.drawImage(image, 0, 0);
                            
                            const emptyImageData = ctx.createImageData(canvas.width, canvas.height);
                            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                            
                            // console.log(getPixel(imageData, 0, 0));
                            // console.log(getPixel(imageData, 0, 5));
                            // console.log(getPixel(imageData, 0, 9));
                            // console.log(getColor(imageData, 0, 0, "R"));
                            // console.log(getColor(imageData, 0, 5, "G"));
                            // console.log(getColor(imageData, 0, 9, "B"));
                            
                            // console.log(imageData);
                            
                            // const uint8ClampedArray = imageData.data;
                            // uint8ClampedArray.length = imageData.width * imageData.height * 4;
                            console.log(imageData.data[0]);
                            for(let h = 0; h < imageData.height; h++) {
                                for(let w = 0; w < imageData.width; w++) {
                                    const pixel = getPixel(imageData, h, imageData.width - w - 1);
                                    setPixel(emptyImageData, h, w, pixel);
                                }
                            }
                            mirrorCtx.putImageData(emptyImageData, 0, 0);
                            
                            console.log(imageData, emptyImageData);
                            
                            function getPixel(imageData, row, column) {
                                const uint8ClampedArray = imageData.data;
                                const width = imageData.width;
                                const height = imageData.height;
                                const pixel = [];
                                for(let i = 0; i < 4; i++) {
                                    pixel.push(uint8ClampedArray[row * width * 4 + column * 4 + i]);
                                }
                                return pixel;
                            }
                            
                            function setPixel(imageData, row, column, pixel) {
                                const uint8ClampedArray = imageData.data;
                                const width = imageData.width;
                                const height = imageData.height;
                                for(let i = 0; i < 4; i++) {
                                    uint8ClampedArray[row * width * 4 + column * 4 + i] = pixel[i];
                                }
                            }
                            
                            // function getColor(imageData, row, column, color) {
                            //     const pixel = getPixel(imageData, row, column);
                            //     switch(color) {
                            //         case "R":
                            //             return pixel[0];
                            //         case "G":
                            //             return pixel[1];
                            //         case "B":
                            //             return pixel[2];
                            //         case "A":
                            //             return pixel[3];
                            //     }
                            //     return null;
                            // }
                        }
                    }
                }
            }
        </script>
    </body>
</html>

参考:链接

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

JavaScript canvas实现镜像图片效果

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

使用canvas怎么实现元素图片镜像翻转动画效果

使用canvas怎么实现元素图片镜像翻转动画效果?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。一、Canvas图片水平镜像翻转效果预览您可以狠狠的点击这里:canvas图片
2023-06-09

canvas如何实现图片镜像翻转

这篇文章给大家分享的是有关canvas如何实现图片镜像翻转的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。1. 通过canvas自带的画布方法进行翻转 var img = new Image(); //这个就是
2023-06-09

使用JavaScript实现简单图像放大镜效果

图像放大镜在很多网站中都扮演着重要的角色,大多数开发人员使用 jquery 来创建图像放大镜。在本教程中,我将向大家展示如何使用 HTML、CSS 和 JavaScript 制作一个简单的图像放大镜,需要的可以参考一下
2022-11-13

JavaScript利用canvas实现炫酷的碎片切图效果

这篇文章主要和大家分享一个炫酷的碎片式切图效果,本文主要利用canvas来实现,代码量不多,但有些地方还是需要花点时间去理解的,感兴趣的可以学习一下
2022-11-13

Python学习之图片滤镜效果的实现

滤镜效果是图像处理中常用的一种技术,可以用来增强图像的视觉效果,实现不同的效果,本文就来利用Python中的Image模块实现常见的几个图片滤镜吧
2023-05-19

编程热搜

目录