Skip to content

Instantly share code, notes, and snippets.

@qodesmith

qodesmith/avgColor.js

Forked from olvado/getAverageColourAsRGB.js
Last active July 26, 2016 21:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save qodesmith/beba97d13a9ab81360ed39598c9fc37c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save qodesmith/beba97d13a9ab81360ed39598c9fc37c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. qodesmith revised this gist Jul 26, 2016. 1 changed file with 11 additions and 11 deletions.
    22 changes: 11 additions & 11 deletions avgColor.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    function avgColor (imageUrl) {
    function avgColor(imageUrl) {
    var canvas = document.createElement('canvas');
    var context = canvas.getContext && canvas.getContext('2d');
    var rgb = {r:102, g:102, b:102}; // Set a base colour as a fallback for non-compliant browsers
    var rgb = {r: 102, g: 102, b: 102}; // Set a base colour as a fallback for non-compliant browsers
    var pixelInterval = 5; // Rather than inspect every single pixel in the image inspect every 5th pixel
    var count = 0;
    var i = -4;
    @@ -10,7 +10,7 @@ function avgColor (imageUrl) {
    var length;
    var width;
    var height;

    img.setAttribute('src', imageUrl);

    // return the base colour for non-compliant browsers
    @@ -24,7 +24,7 @@ function avgColor (imageUrl) {

    try {
    data = context.getImageData(0, 0, width, height);
    } catch(e) {
    } catch (e) {
    // catch errors - usually due to cross domain security issues
    alert(e);
    return rgb;
    @@ -35,14 +35,14 @@ function avgColor (imageUrl) {
    while ((i += pixelInterval * 4) < length) {
    count++;
    rgb.r += data[i];
    rgb.g += data[i+1];
    rgb.b += data[i+2];
    rgb.g += data[i + 1];
    rgb.b += data[i + 2];
    }

    // floor the average values to give correct rgb values (ie: round number values)
    rgb.r = Math.floor(rgb.r/count);
    rgb.g = Math.floor(rgb.g/count);
    rgb.b = Math.floor(rgb.b/count);
    rgb.r = Math.floor(rgb.r / count);
    rgb.g = Math.floor(rgb.g / count);
    rgb.b = Math.floor(rgb.b / count);

    return rgb;
    }
    }
  2. qodesmith revised this gist Jul 26, 2016. 1 changed file with 6 additions and 4 deletions.
    10 changes: 6 additions & 4 deletions avgColor.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,22 +1,24 @@
    function avgColor (imageUrl) {
    var canvas = document.createElement('canvas');
    var context = canvas.getContext && canvas.getContext('2d');
    var rgb = {r:102,g:102,b:102}; // Set a base colour as a fallback for non-compliant browsers
    var rgb = {r:102, g:102, b:102}; // Set a base colour as a fallback for non-compliant browsers
    var pixelInterval = 5; // Rather than inspect every single pixel in the image inspect every 5th pixel
    var count = 0;
    var i = -4;
    var img = document.createElement('img');
    var data;
    var length;
    var width;
    var height;

    img.setAttribute('src', imageUrl);

    // return the base colour for non-compliant browsers
    if (!context) { return rgb; }
    if (!context) return rgb;

    // set the height and width of the canvas element to that of the image
    var height = canvas.height = img.naturalHeight || img.offsetHeight || img.height,
    width = canvas.width = img.naturalWidth || img.offsetWidth || img.width;
    height = canvas.height = img.naturalHeight || img.offsetHeight || img.height;
    width = canvas.width = img.naturalWidth || img.offsetWidth || img.width;

    context.drawImage(img, 0, 0);

  3. qodesmith renamed this gist Jul 26, 2016. 1 changed file with 12 additions and 8 deletions.
    20 changes: 12 additions & 8 deletions getAverageColourAsRGB.js → avgColor.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,11 +1,15 @@
    function getAverageColourAsRGB (img) {
    var canvas = document.createElement('canvas'),
    context = canvas.getContext && canvas.getContext('2d'),
    rgb = {r:102,g:102,b:102}, // Set a base colour as a fallback for non-compliant browsers
    pixelInterval = 5, // Rather than inspect every single pixel in the image inspect every 5th pixel
    count = 0,
    i = -4,
    data, length;
    function avgColor (imageUrl) {
    var canvas = document.createElement('canvas');
    var context = canvas.getContext && canvas.getContext('2d');
    var rgb = {r:102,g:102,b:102}; // Set a base colour as a fallback for non-compliant browsers
    var pixelInterval = 5; // Rather than inspect every single pixel in the image inspect every 5th pixel
    var count = 0;
    var i = -4;
    var img = document.createElement('img');
    var data;
    var length;

    img.setAttribute('src', imageUrl);

    // return the base colour for non-compliant browsers
    if (!context) { return rgb; }
  4. @olvado olvado revised this gist Jun 27, 2011. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion getAverageColourAsRGB.js
    View file
    Original file line number Diff line number Diff line change
    @@ -8,7 +8,7 @@ function getAverageColourAsRGB (img) {
    data, length;

    // return the base colour for non-compliant browsers
    if (!context) { alert('Your browser does not support CANVAS'); return rgb; }
    if (!context) { return rgb; }

    // set the height and width of the canvas element to that of the image
    var height = canvas.height = img.naturalHeight || img.offsetHeight || img.height,
  5. @olvado olvado revised this gist Jun 27, 2011. 1 changed file with 7 additions and 2 deletions.
    9 changes: 7 additions & 2 deletions getAverageColourAsRGB.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,14 +1,16 @@
    function getAverageColourAsRGB (img) {
    var canvas = document.createElement('canvas'),
    context = canvas.getContext && canvas.getContext('2d'),
    rgb = {r:102,g:102,b:102},
    pixelInterval = 5,
    rgb = {r:102,g:102,b:102}, // Set a base colour as a fallback for non-compliant browsers
    pixelInterval = 5, // Rather than inspect every single pixel in the image inspect every 5th pixel
    count = 0,
    i = -4,
    data, length;

    // return the base colour for non-compliant browsers
    if (!context) { alert('Your browser does not support CANVAS'); return rgb; }

    // set the height and width of the canvas element to that of the image
    var height = canvas.height = img.naturalHeight || img.offsetHeight || img.height,
    width = canvas.width = img.naturalWidth || img.offsetWidth || img.width;

    @@ -17,6 +19,7 @@ function getAverageColourAsRGB (img) {
    try {
    data = context.getImageData(0, 0, width, height);
    } catch(e) {
    // catch errors - usually due to cross domain security issues
    alert(e);
    return rgb;
    }
    @@ -29,6 +32,8 @@ function getAverageColourAsRGB (img) {
    rgb.g += data[i+1];
    rgb.b += data[i+2];
    }

    // floor the average values to give correct rgb values (ie: round number values)
    rgb.r = Math.floor(rgb.r/count);
    rgb.g = Math.floor(rgb.g/count);
    rgb.b = Math.floor(rgb.b/count);
  6. @invalid-email-address Anonymous created this gist Jun 27, 2011.
    37 changes: 37 additions & 0 deletions getAverageColourAsRGB.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,37 @@
    function getAverageColourAsRGB (img) {
    var canvas = document.createElement('canvas'),
    context = canvas.getContext && canvas.getContext('2d'),
    rgb = {r:102,g:102,b:102},
    pixelInterval = 5,
    count = 0,
    i = -4,
    data, length;

    if (!context) { alert('Your browser does not support CANVAS'); return rgb; }

    var height = canvas.height = img.naturalHeight || img.offsetHeight || img.height,
    width = canvas.width = img.naturalWidth || img.offsetWidth || img.width;

    context.drawImage(img, 0, 0);

    try {
    data = context.getImageData(0, 0, width, height);
    } catch(e) {
    alert(e);
    return rgb;
    }

    data = data.data;
    length = data.length;
    while ((i += pixelInterval * 4) < length) {
    count++;
    rgb.r += data[i];
    rgb.g += data[i+1];
    rgb.b += data[i+2];
    }
    rgb.r = Math.floor(rgb.r/count);
    rgb.g = Math.floor(rgb.g/count);
    rgb.b = Math.floor(rgb.b/count);

    return rgb;
    }