基於canvas圖像處理的圖片灰色圖像

時間 2019-12-01

標籤基於 canvas 圖像處理圖片灰色圖像简体版

原文原文鏈接

圖片展現網頁每每色彩繁雜，當一個網頁上有多張圖片的時候用戶的注意力就很不容易集中，並且會形成網站整個色調風格的不可把控。javascript

能不能把全部的預覽圖變成灰度圖片，等用戶激活某張圖片的時候再上色呢？css

之前，惟一的方法就是讓美工作兩張圖，一張彩色一張黑白，費時費力。html

能不能讓js對圖片進行一些處理呢？幸運的是，canvas就提供了圖片處理的方法。java

canvas+js能夠讓咱們對圖片進行像素級的操做，咱們能夠經過操做圖像的像素實現各類圖片處理效果,如模糊，馬賽克，液化，調色等等。canvas

詳細代碼及註釋以下：app

<!doctype html>
<html>
<head>
    <title>Canvas圖像處理demo-by-@謝帥shawn</title>
    <meta charset='utf-8' />
    <script src="jQuery.js" type="text/javascript"></script>
    <style>
        h1{text-align:center;}
        .outer{width:800px;margin:0 auto;}
        img{border:0;width:200px;height:350px;margin:0;padding:0;}
    </style>
</head>

<body>
    <h1>Canvas圖像處理demo</h1>
    <div class='outer'>
        <img class='image' src='images/1.jpg'/>
        <img class='image' src='images/2.jpg'/>
        <img class='image' src='images/3.jpg'/>
        <img class='image' src='images/4.jpg'/>
        <img class='image' src='images/5.jpg'/>
    </div>
    <script>
　　　　　/*等圖片加載完成後再執行（若圖片沒有加載完成，則不能正常進行圖片處理）*/
        $(window).load(function(){
　　　　　　　/*克隆一張原圖，把當前圖片變爲灰度圖*/
            $('.image').each(function(){
                $(this).css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block;position:relative;float:left;'></div>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore($(this));
                $('.img_wrapper').css({'height':$(this).height(),'width':$(this).width()});
                this.src=huidu(this.src);
            });
　　　　　　　/*經過控制彩色圖片的透明度模擬上色效果*/
            $('.img_wrapper').mouseover(function(){  
                   $(this).find('img:first').stop().animate({opacity:1},100);  
            })  
            $('.img_wrapper').mouseout(function(){  
                   $(this).find('img:first').stop().animate({opacity:0},100);  
            });  
            /*
　　　　　　　　*function
　　　　　　　　*函數名稱：huidu
　　　　　　　　*功能：把圖片轉換爲灰度圖
　　　　　　　　*參數：src（原圖的url）
　　　　　　　　*返回值：（轉換完成後的圖片url）
　　　　　　　　*/
            function huidu(src){
　　　　　　　　　/*建立一個canvas*/
                var canvas=document.createElement('canvas');
                var ctx=canvas.getContext('2d');
                var img=new Image();
                img.src=src;
                canvas.height=img.height;
                canvas.width=img.width;
                ctx.drawImage(img,0,0);
                var imgdata=ctx.getImageData(0,0,canvas.width,canvas.height);var data=imgdata.data;
　　　　　　　　　/*灰度處理：求r，g，b的均值，並賦回給r，g，b*/
                for(var i=0,n=data.length;i<n;i+=4){
                    var average=(data[i]+data[i+1]+data[i+2])/3;
                    data[i]=average;
                    data[i+1]=average;
                    data[i+2]=average;
                }
                ctx.putImageData(imgdata,0,0);
　　　　　　　　　/*返回處理以後的src*/
                return canvas.toDataURL();
            }
        });
    </script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

基於canvas圖像處理的圖片 灰色圖像

基於canvas圖像處理的圖片灰色圖像