JavaScript
JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlex脚本加解密web2.0XML/RSS网页编辑器相关技巧安全相关网页播放器DartVue.js

JavaScript canvas实现镜像图片效果

发布时间：2022-04-16 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了JavaScript canvas实现镜像图片效果，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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

<!DOCTYPE htML>
<html>
    <head>
        <;meta charset="utf-8">
        <tITle>Using image</title>
        <style type="text/css">
            * {
                /* margin: 0;
                padding: 0; */
                box-sizing: border-box;
            }
            canvas {
                /* border-width: 1px;
                border-color: #000000;
                border-style: solid; */
            }
        </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.src = URL.createObjectURL(file);
                        image.onload = function(event) {
                            // console.log(event, this);
                            URL.revokeObjectURL(this.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>

参考：链接

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本宝典。

您可能感兴趣的文章:

脚本宝典总结

以上是脚本宝典为你收集整理的JavaScript canvas实现镜像图片效果全部内容，希望文章能够帮你解决JavaScript canvas实现镜像图片效果所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：jsjs
猜你在找的JavaScript相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新JavaScript教程
热门JavaScript教程