كيفاش تصاوب ColorPicker ب jquery


فهاد الدرس من كيفاش تصاوب ColorPicker ب jquery غادي نشوفو كيفاش نهزو اللون من صورة بإستعمال jquery وعرضو الدرس بسيط للمبتدئين.

نظرة سريعة بالفيديو

- الملفات الأساسية

غادي تمشي لwamp و منبعد تمشي للمجلد www وتزيد مجلد جديد تسميه colorPicker من بعد غادي تزيد فيه 3 ديال المجلدات css و js و includes منبعد غادي تقوم بتحميل bootstrap وغادي تزيد الملف bootstrap.min.css ف css وتزيد ملف تسميه script.js ف js من بعد غادي تزيد ملف تسميه header.php و آخر تسميه footer.php فincludes الملف header.php الكود ديالو هو :

                                <!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Color Picker</title>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Color Picker</a>
     <ul class="nav navbar-nav">
      <li class="active"><a href="index.php">Accueil <span class="sr-only"></span></a></li>
     </ul>
    </div>
</nav>
                            

- الملف footer.php

هاد الملف غادي يكون هو الأساس ديال كل الصفحات الخاصة بجهة الزوار ولي غادي يربط ملفات js بالملفات ديالنا.

                                <script src="js/jquery.js"></script>
<script src="js/script.js"></script>
</body>
</html>
                            

- الملف script.php

هادا الملف الرئيسي لي غادي يكون فيه الكود ديالنا فأولا كنسترجع ل canvas لي زدت ف index.php عن طريق ل id ديالو من بعد كنزيد الصورة لي غادي نجبد منها الألوان ثم كنزيد fonction click لي كتمكن من بعد مكنكليكي على لcanvas كن نسترجع الموقع ديال الصورة ناقص الفراغ لي كيكون فوق وفيسار الصورة منبعد ب context.getImageData كنسترجع لpixel من الصورة ولي هو pixel واحد فقط ولي فيه اللون لي كليكيت عليه من بعد كنزيدو فل variable color لي كنديرها background للمنطقة لي غادي تعرض اللون وكنعرضها فinput text الكود ديال الملف هو :

                                $(document).ready(function(){
    //retourne le canvas
    var canvas = $('#canvas').get(0);
    var context = canvas.getContext("2d");
    var image = new Image();
    image.src = "photo1.jpg";
    //inserer l'image
    $(image).load(function(){
        context.drawImage(image,0,0);
    });
    $(image).addClass("thumbnail");
    $(canvas).click(function(e){
        //retourne la position x et y moins l'espace
        var canvasEspace = $(canvas).offset();
        var positionXActu = Math.floor(e.pageX - canvasEspace.left);
        var positionYActu = Math.floor(e.pageY - canvasEspace.top);
        //get pixel
        var pixel = context.getImageData(positionXActu,positionYActu,1,1);
        var data = pixel.data;
        var color = "rgba("+ data[0] + "," + data[1] + "," + data[1] + "," +data[3] +")"; 
        //afficher la couleur
        //alert(color);
        $('#show').css("backgroundColor",color); 
        $('#color').val(color);
    });
});
                            

- الملف index.php

منبعد فالمجلد الرئيسي كنزيد ملف جديد index.php هادا الملف الرئيسي ديالنا لي غادي يتم فيه عرض الصورة فلcanvas واللون بالإضافة للكود ديال اللون فinput Text الكود ديالو هو :

                                    <body>
<?php include("includes/header.php");?>
    <div class="container">
        <div class="row">
            <div class="col-md-3 col-md-offset-4">
                <canvas id="canvas">
                    Votre navigateur ne support pas HTML5 canvas!!!
                </canvas>
                <div id="show" style="width:200px;height:100px;margin-bottom:10px;border:1px solid #000"></div>
                <div class="form-group">
                    <input type="text" id="color">
                </div>
               </div>
            </div>
        </div>
    </div>
</body>
<?php include("includes/footer.php");?>
                                


إشترك في قناتنا على اليوتيوب

بحث في الموقع


إشترك للتوصل بالجديد