Background color for css transparent background image

Question

I can place a background image for a specific div using css c background: url(dump.gif);, for example. If you say the gif is transparent, I can apply the background color to it with css. Say I press a button and the command runs to change the background of only a transparent image, and this image is embedded in a larger div.

Imagine that the glass is embedded in a larger div and is set as described as a css background. Any way to change only its background.

"No" is fine, as the answer, at least I will cease to be surprised.

EDIT: added jsfiddle. If glas is misleading, click the fiddle.

http://jsfiddle.net/v4yfdkmf/

, . .

Answer 1

base64 Javascript, . Fiddle :

function encodeHex(s) {
    s = s.substring(1, 7);
    if (s.length < 6) {
        s = s[0] + s[0] + s[1] + s[1] + s[2] + s[2];
    }
    return encodeRGB(
    parseInt(s[0] + s[1], 16), parseInt(s[2] + s[3], 16), parseInt(s[4] + s[5], 16));
};

function encodeRGB(r, g, b) {
    return encode_triplet(0, r, g) + encode_triplet(b, 255, 255);
};

function encode_triplet(e1, e2, e3) {
    var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
    enc1 = e1 >> 2;
    enc2 = ((e1 & 3) << 4) | (e2 >> 4);
    enc3 = ((e2 & 15) << 2) | (e3 >> 6);
    enc4 = e3 & 63;
    return keyStr.charAt(enc1) + keyStr.charAt(enc2) + keyStr.charAt(enc3) + keyStr.charAt(enc4);
};

function generatePixel(color) {
    return "data:image/gif;base64,R0lGODlhAQABAPAA" + color + "/yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==";
};


var imageDiv = $('.big_div');
var originalImage = imageDiv.css('background-image');
$('.change_color').on('click', function (e) {
    var hex = $('#color_hex').val();
    var color = encodeHex(hex);
    var data = generatePixel(color);
	imageDiv.css({
        'background-image': originalImage + ', url(' + data + ')'
    });
});

.big_div {
    background: url('http://info.eps.surrey.ac.uk/logos/transbugs.gif') no-repeat center center;
    background-size: 160px 100px;
    width: 300px;
    height: 200px;
    border: 1px solid black;
    margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="big_div"></div>
<fieldset>
    <legend>Pick color:</legend>
    <p>
        <label for="color_hex">Hex color:</label>
        <input id="color_hex" type="text" placeholder="#ccc" />
    </p>
    <p>
        <button class="change_color">Change color</button>
    </p>
</fieldset>

Hide result

this Fiddle, .

Answer 2

API . (. https://developer.mozilla.org/en-US/docs/Canvas_API/Tutorial/Pixel_manipulation_with_canvas/)

- :

var img = new Image();
img.src = 'your pic source';
img.onload = function() {
  draw(this);
};

function draw(img) {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  img.style.display = 'none';
  var imageData = ctx.getImageData(0,0,canvas.width, canvas.height);
  var data = imageData.data;

.
, , ( , gif).

ctx.putImageData(imageData, 0, 0);

, , .