JavaScript canvas實現映象圖片效果

本文例項為大家分享了 canvas實現映象圖片效果的具體程式碼，供大家參考，具體內容如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Using image</title>
        <style type="text/">
            * {
                /* margin: 0;
                padding: 0; */
                box-sizing: border-box;
            }
            canvas {
                /* border-width: 1px;
                border-color: #000000;
                border-style: solid; */
            }
        </st 
yle>
    </head>
    <body>
        <canvas id="canvas"></canvas>
        <canvas id="mirror"></ggtiFGzocanvas>
        
        <div>
            <input type="file" accept="image/*" />
        </div>
        
        <script type="text/script">
            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;
     ggtiFGzo 
                       
                            ctx.drawImage(image,0);
                            
                            const emptyImageData = ctx.createImageData(canvas.width,canvas.height);
                            const imageData = ctx.getImageData(0,canvas.width,canvas.height);
                            
                            // console.log(getPixel(imageData,0));
                            // console.log(getPixel(imageData,5));
                            // console.log(getPixel(imageData,9));
                            // console.log(getColor(imageData,"R"));
                            // console.log(getColor(imageData,5,"G"));
                            // console.log(getColor(imageData,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,w,pixel);
                                }
                            }
                            mirrorCtx.putImageData(emptyImageData,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,column,pixelwww.cppcns.com 
) {
                                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,color) {
                            //     const pixel = getPixel(imageData,column);
                            //     switch(color) {
                            //         case "R":
                            //             return pixel[0];
                            //         case "G":
                            //             return pixel[1];
                            //         case "B":
                            //             return pixel[2];
 ggtiFGzo                           //         case "A":
                            //             return pixel[3];
                            //     }
                            //     return null;
                            // }
                        }
                    }
                }
            }
        </script>
    </body>
</html>

參考：連結

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

JavaScript canvas實現映象圖片效果

JavaScript canvas實現映象圖片效果

JavaScript canvas實現七彩時鐘效果

JavaScript canvas實現程式碼雨效果

JavaScript canvas實現載入圖片

JavaScript canvas實現七彩太陽光暈效果

javascript canvas實現雨滴效果

JavaScript canvas實現動態點線效果

JavaScript canvas實現九宮格切圖效果

JavaScript canvas實現雪花隨機動態飄落

JavaScript canvas實現跟隨滑鼠事件

JavaScript前端實現壓縮圖片功能

javascript+css實現進度條效果

javascript+Canvas實現畫板功能

JavaScript+canvas 實現五子棋遊戲

基於javascript canvas實現五子棋遊戲

原生js canvas實現滑鼠跟隨效果

原生js+canvas實現貪吃蛇效果

javascript canvas實現簡易時鐘例子

JavaScript+Canvas實現自定義畫板

JavaScript canvas實現雨滴特效

JavaScript canvas實現映象圖片效果

相關推薦