Changing the header background color from images of the bootstrap carousel using color-thief

Question

I have used the bootstrap carousal and able to change the color of header background using color thief of one image only.

But in carousal there are multiple image changing with time.I am not able to get the image id from carousel for each image and set the color of header with changing of image using color thief .

This is the code I have tried, please tell me how to change the header background color according to change of carousal image. Thanks in advance

HTML

<section class="block">
    <div style="padding:42px">
        <div class="col-xs-12" style="border:15px solid rgb(250, 250, 250);padding: 0px;">
            <div id="myDiv">

                <div id="myCarousel" class="carousel slide" data-ride="carousel">

                    <!-- Wrapper for slides (228, 226, 224) -->

                    <div class="carousel-inner reduce-height" role="listbox">

                        <div class="item active">
                            <img id="myimg" src="images/titanic.jpg" alt="Chania">

                            <div class="absolute-div">
                                <div class="carousel-caption">
                                    <h3>Unforgettable Moments</h3>
                                </div>
                            </div>
                        </div>

                        <div class="item">
                            <img id="myimg2" src="images/beautiful-couple-widescreen.jpg" alt="Chania">
                            <div class="absolute-div">
                                <div class="carousel-caption">
                                    <h3>Cherishable Memories</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>

This is my code for color thief and carousal

<script>
    $(window).ready(function() {

        $('.carousel').carousel({
            interval: 3000
        });


        var sourceImage = document.getElementById("myimg");
        var colorThief = new ColorThief();
        var color = colorThief.getColor(sourceImage);
        document.getElementById("mydiv").style.backgroundColor = "rgb(" + color + ")";
    });
</script>

Guruprasad J Rao · Accepted Answer · 2015-08-12T14:40:05.777

0

Identify which img is active currently using below event of bootstrap carousel

$('#yourcarouselid').on('slide.bs.carousel', function (e) {
      $('#myCarousel').on('slide.bs.carousel', function (e) {
           var sourceImage=$(e.relatedTarget).find('img'); //get the active sliding image
           var colorThief=new ColorThief();
           var color = colorThief.getColor(sourceImage);
           document.getElementById("mydiv").style.backgroundColor = "rgb(" + color+")";
      }); 
});

Update

Just change one line above:

var sourceImage=$(e.relatedTarget).find('img')[0]

edited Aug 12 '15 at 14:40

answered Aug 12 '15 at 11:51

Guruprasad J Rao

29,410
14
101
200

I have tried your method but its throwing this error Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)' 2color-thief.js:34 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)' – henrycharles Aug 12 '15 at 13:45
@henrycharles updated answer.,.. check and let me knw!! – Guruprasad J Rao Aug 12 '15 at 14:40
thanks for helping yes its working but its working for mozilla firefox only its not working in google chrome why is that so ? – henrycharles Aug 12 '15 at 18:49
This is the error coming in google chrome--->Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. And also after sometime in mozilla firefox unresponsive script is popping up ..please help me to clarify the concepts why this is happening thanks in advance – henrycharles Aug 12 '15 at 19:00
@henrycharles.. After I googled the exception you are getting I got **[this](http://stackoverflow.com/questions/22097747/getimagedata-error-the-canvas-has-been-tainted-by-cross-origin-data)** and **[this](http://stackoverflow.com/questions/26688168/uncaught-securityerror-failed-to-execute-getimagedata-on-canvasrenderingcont)** link which might be helpful to you to understand. Its not problem with the code I gave. Its now something to do with your internal coding. – Guruprasad J Rao Aug 13 '15 at 03:51
1

thanks for supporting its now working after deploying in the server – henrycharles Aug 13 '15 at 04:37
Cool.. Happy coding.. :) – Guruprasad J Rao Aug 13 '15 at 04:38

Changing the header background color from images of the bootstrap carousel using color-thief

1 Answers1