I have an element with 2 backgrounds
I want to add an image beneath the last one so I'm taking the current background and adding a base64 image
It doesn't seem to work though, the style attribute of the element never changes... If I used background-image, the picture would not stay beneath the color though
a snippet:
let src = "data:image/jpeg;base64,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";
let data = $("#obj").css("background") + `, url("${src}")`;
$("#obj").css("background", data);
#obj{
background: linear-gradient(to right, rgba(37, 45, 71, 0), rgba(37, 45, 71, 1) 20%), rgba(255, 45, 71, 0.25);
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="obj">Test object</div>
EDIT
Weirdest thing:
e.style.background =
"linear-gradient(to right, rgba(37, 45, 71, 0), #252d47 20%),
#252d47,
url("+src+")";
doesn't work, but following does:
e.style.background =
"linear-gradient(to right, rgba(37, 45, 71, 0), #252d47 20%),
url("+src+")"
I have no idea...
EDIT 2
After realising js was not gonna let me do what i wanted, i just wrapped my element in another one and attached the background to the parent
Not sure why .css() doesn't work, but if you use .attr with style, it seems to work properly:
let src = "data:image/gif;base64,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";
let data = $("#obj").css("background") + `, url("${src}")`;
$("#obj").attr("style", "background: " + data);
#obj{
background: linear-gradient(to right, rgba(37, 45, 71, 0), rgba(37, 45, 71, 1) 20%), rgba(255, 45, 71, 0.25);
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="obj">Test object</div>
After working/studying hours with canvas i have managed to get the image clone and it's pixels now i have made the user select a color from a color specterm and i have that color hex in my function :
move: function (color) {
// 'color' is the value user selected
var img_id = jQuery(".selected_bg_img").attr("id");
alert(img_id);
var x = 0;
var y = 0;
var width = 409;
var height = 409;
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById(img_id);
ctx.drawImage(img,x,y,width,height);
var imageData = ctx.getImageData(0,0,width,height);
var data = imageData.data;
alert(data);
}
now two tasks are getting in way,
1. How do we extract the maximum color from data ?
2. How do we convert that maximum color to the color we got in function ?
for live working example i have link given at end
NOTE: Select the images (any last 3) from left side of the product image and and when color is choose it clones the image to the canvas below.
Here i am trying to clone the image with replacement of maximum color with the color user selected.
NOTE: Maximum color i mean (dominant color in image), e.g http://lokeshdhakar.com/projects/color-thief/ this project is getting the dominant color of image but it's on node and i'm trying to get the dominant and to change that color before cloning too .
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i]=255-imgData.data[i];
imgData.data[i+1]=255-imgData.data[i+1];
imgData.data[i+2]=255-imgData.data[i+2];
imgData.data[i+3]=255;
}
*****EDIT*****
My problem is not very complex i think i have this image
so we can see clearly that the dominant color is grey, by any method i am just trying to replace that color with the new color i have in my function move and draw that image with the new color. The image from where i have taken and shows another example :
http://www.art.com/products/p14499522-sa-i3061806/pela-silverman-colorful-season-i.htm?sOrig=CAT&sOrigID=0&dimVals=729271&ui=573414C032AA44A693A641C8164EB595
on left side of image when we select the similar image they have option "change color" at the bottom center of image. This is what exactly i'm trying to do.
So now i tried to read the image 1x1 and this is what i get in the console when i log it(particular for the image i have shown) :
[166, 158, 152, 255, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0…]
So it maybe the very first start from top left corner, i guess it need to be iterated over whole image and this is what i get when i iterated over whole image:
[110, 118, 124, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255…]
The loop i used for iteration is:
var imageData = ctx.getImageData(0,0,width,height);
var data = imageData.data;
for (var i=0;i<data.length;i+=4)
{
data[i]=255-data[i];
data[i+1]=255-data[i+1];
data[i+2]=255-data[i+2];
data[i+3]=255;
}
console.log(data);
Is this iteration right ? If yes, it seems to be now matter of replacing the dominant color and i'm blank here how do we replace it and write back image with the replaced color or is there something more ?
*************EDIT***********
i have now user value in rgb, need to look for places where that value should be placed
This answer may be what you want as it is a little unclear.
Finding the dominant colour in an image
There are two ways that I use. There are many other ways to do it, which is the best is dependent on the needs and quality requiered. I will concentrat on using a histogram to filter out irrelevent pixels to get a result.
The easy way.
Create a canvas that is 1 by 1 pixel. Ensure that canvas smoothing is on.
ctx.imageSmoothingEnabled = true;
ctx.mozImageSmoothingEnabled = true;
The draw the image onto that 1 by 1 canvas
ctx.drawImage(image,0,0,1,1);
Get the pixel data
var data = ctx.getImageData(0,0,1,1);
And the rgb values are what you are after.
r = data.data[0];
g = data.data[0];
b = data.data[0];
The result applied to the image below.
The long way
This method is long and problematic. You need to ignore the low and high values in the histogram for rgb (ignore black and white values) and for HSL ignore Saturations and Values (Lightness) that are 0 or 100% or you will get reds always dominating for images that have good contrast.
In image processing a histogram is a plot of the distribution of image properties (eg red green blue) within the image. As digital images have discrete values the histogram (a bar graph) will plot along the x axis the value and in the y axis the number of pixels that have that value.
An example of the histogram. Note that this code will not run here as there is cross origin restriction. (sorry forgot my browser had that disabled).
/** CopyImage.js begin **/
// copies an image adding the 2d context
function copyImage(img){
var image = document.createElement("canvas");
image.width = img.width;
image.height = img.height;
image.ctx = image.getContext("2d");
image.ctx.drawImage(img, 0, 0);
return image;
}
function copyImageScale(img,scale){
var image = document.createElement("canvas");
image.width = Math.floor(img.width * scale);
image.height = Math.floor(img.height * scale);
image.ctx = image.getContext("2d");
image.ctx.drawImage(img, 0, 0,image.width,image.height);
return image;
}
/** CopyImage.js end **/
function getHistogram(img){ // create a histogram of rgb and Black and White
var R,G,B,BW;
R = [];
G = [];
B = [];
BW = []; // Black and white is just a mean of RGB
for(var i=0; i < 256; i++){
R[i] = 0;
G[i] = 0;
B[i] = 0;
BW[i] = 0;
}
var max = 0; // to normalise the values need max
var maxBW = 0; // Black and White will have much higher values so normalise seperatly
var data = img.ctx.getImageData(0,0,img.width,img.height);
var d = data.data;
var r,g,b;
i = 0;
while(i < d.length){
r = d[i++]; // get pixel rgb values
g = d[i++];
b = d[i++];
i++; // skip alpha
R[r] += 1; // count each value
G[g] += 1;
B[b] += 1;
BW[Math.floor((r+g+b)/3)] += 1;
}
// get max
for(i = 0; i < 256; i++){
max = Math.max(R[i],G[i],B[i],max);
maxBW = Math.max(BW[i],maxBW);
}
// return the data
return {
red : R,
green : G,
blue : B,
gray : BW,
rgbMax : max,
grayMax : maxBW,
};
}
function plotHistogram(data,ctx,sel){
var w = ctx.canvas.width;
var h = ctx.canvas.height;
ctx.clearRect(0,0,w,h); // clear any existing data
var d = data[sel];
if(sel !== "gray"){
ctx.fillStyle = sel;
}
var rw = 1 / d.length; // normalise bar width
rw *= w; // scale to draw area;
for(var i = 0; i < d.length; i++ ){
var v = 1-(d[i]/data.rgbMax); // normalise and invert for plot
v *= h; // scale to draw area;
var x = i/d.length; // normaise x axis
x *= w; // scale to draw area
if(sel === 'gray'){
ctx.fillStyle = "rgb("+i+","+i+","+i+")";
}
ctx.fillRect(x,v,rw,h-v); // plot the bar
}
}
var canMain = document.createElement("canvas");
canMain.width = 512;
canMain.height = 512;
canMain.ctx = canMain.getContext("2d");
document.body.appendChild(canMain);
var ctx = canMain.ctx;
var can = document.createElement("canvas");
can.width = 512;
can.height = 512;
can.ctx = can.getContext("2d");
// load image and display histogram
var image = new Image();
image.src = "http://i.stack.imgur.com/tjTTJ.jpg";
image.onload = function(){
image = copyImage(this);
var hist = getHistogram(image);
// make background black
ctx.fillStyle = "black"
ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height);
// create and show each plot
plotHistogram(hist,can.ctx,"red");
document.body.appendChild(copyImageScale(can,0.5));
ctx.drawImage(can,0,0,canvas.width,canvas.height);
plotHistogram(hist,can.ctx,"green");
document.body.appendChild(copyImageScale(can,0.5));
ctx.globalCompositeOperation = "lighter"
ctx.drawImage(can,0,0,canvas.width,canvas.height);
plotHistogram(hist,can.ctx,"blue");
document.body.appendChild(copyImageScale(can,0.5));
ctx.globalCompositeOperation = "lighter"
ctx.drawImage(can,0,0,canvas.width,canvas.height);
plotHistogram(hist,can.ctx,"gray");
document.body.appendChild(copyImageScale(can,0.5));
ctx.globalCompositeOperation = "source-over"
ctx.globalAlpha = 0.9;
ctx.drawImage(can,0,0,canvas.width,canvas.height);
ctx.globalAlpha = 1;
}
As the above code required a hosted image the results are shown below.
The image
The RGB and gray histograms as output from above code.
From this you can see the dominant channels and the distribution of rgb over the image (Please note that I removed the black as this image has a lot of black pixels that where make the rest of the pixel counts shrink into insignificance)
To find the dominant colour you can do the same but for the HSL values. For this you will need to convert from RGB to HSL. This answer has a function to do that. Then it is just a matter of counting each HSL value and creating a histogram.
The next image is a histogram in HSL of the above sample image.
As you can see there is a lot of red, then a peek at yellow, and another in green.
But as is this still will not get you what you want. The second histogram (saturation) shows a clear peak in the center. There are a lot of colours that have good saturation but this does not tell you what colour that is.
You need to filter the HSL value to around that peak.
What I do is multiply the HSL values by the f(s) = 1-Math.abs(s-50)/50 s is Saturation range 0-100. This will amplify hue and value where saturation is max. The resulting histogram looks like
Now the peak hue (ignoring the reds) is orange. The hue value is ~ 42. Then you apply a filter that removes all pixels that are not near the hue = 42 (you may want to give a falloff). You apply this filter on the HSL value you get after the last step. The next image shows the resulting image after applying this filter to the original
and then get a sum of all the remaining pixel's R,G,B. The mean of each RGB value is the common colour.
The common colour as by this method.
Note the result is different than if you apply this method as described and in the code above. I used my own image processing app to get the instrume steps and it uses true logarithmic photon counts for RGB values that will tend to be darker than linear interpolation. The final step expands the filtered pixel image to an instrume step that is too complicated to describe here (a modification on the easy method at start of answer). looks like
Also I applied this to the whole image, this can be very slow for large images, but it will work just as well if you first reduce the size of the image (must have image smoothing on (defaults of most browsers)). 128 8 128 is a good size but you can go down lower. It will depend on the image how small you can make it befor it fails.
I have a gradient applied to an element and I'm trying to get the RGB values from the background image using regexp.
#gradient {
background: linear-gradient(to right, rgba(255,0,0,1) 0%, rgba(0,0,255,1) 100%);
}
var elm = document.getElementById("gradient");
var elementColor = getComputedStyle(elm).backgroundImage;
// elementColor = "linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)";
var first = elementColor.match(/rgb\((.*)\)/)[0];
var second = elementColor.match(/rgb\((.*)\)/)[1];
Using /rgb\((.*)\)/ doesn't work, because it returns
"rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)"
And I'm guessing that's because there are parenthesizes occuring twice. How do I fix this? So that it returns
"255,0,0", "0,0,255"
Your regexp doesn't work because .* matches ) as well - as such if we modify it to [^\)]* it becomes what you're after:
var input = "background: linear-gradient(to right, rgba(255,0,0,1) 0%, rgba(0,0,255,1) 100%);";
var array = input.match(/rgba\([^\)]*\)/gi);
for (var i=0; i<array.length; i++)
console.log(array[i].match(/\((.*)\)/)[1]);
http://jsfiddle.net/4z8Ly/2/
Regular expressions are hard. Complex regular expressions with multiple capture groups should be avoided unless they are clearly the most practical way of parsing something.
It is not clear to me they are, in this scenario. I would:
rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)
1- Remove the parenthesis from the expression
string = string.replace(/[()]/g, '');
// "rgb255, 0, 0 0%, rgb0, 0, 255 100%"
2- Split on rgb:
parts = string.split('rgb');
// ["", "255, 0, 0 0%, ", "0, 0, 255 100%"]
3- The first element will always be empty, so get rid of that:
parts.shift()
// ["255, 0, 0 0%, ", "0, 0, 255 100%"]
4- Split each element by /,? / (optional comma, then a space):
parts[0].split(/,? /g)
// ["255", "0", "0", "0%", ""]
There you have your values, and we only needed two dead simple regular expressions.
I wanted to use a single regexp to avoid using multiple lines of code to get the job done, but it seems that what I want to do is not possible with a single regexp.
And I came to understand that you can't capture (but match) if you're using g flag.
I've solved the problem with a one-liner.
elementColor.match(/\(\d+, \d+, \d+\)/g)[0].replace(/[( )]/g, "");
// "linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)" -> "(255, 0, 0)" -> "255,0,0"
Is it somehow possible to convert an byte array to image data without using canvas?
I use currently something like this, however I think that can be done without canvas, or am I wrong?
var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext("2d");
var byteArray = [
255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, // red
0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, // green
0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255 // blue
];
var imageData = ctx.getImageData(0, 0, 10, 3);
for(var i = 0; i < byteArray.length; i+=4){
imageData.data[i] = byteArray[i];
imageData.data[i+1] = byteArray[i + 1];
imageData.data[i+2] = byteArray[i + 2];
imageData.data[i+3] = byteArray[i + 3];
}
ctx.putImageData(imageData, 0, 0);
http://jsfiddle.net/ARTsinn/swnqS/
Update
I've already tried to convert it into an base64-uri but no success:
'data:image/png;base64,' + btoa(String.fromCharCode.apply(this, byteArray));
Update 2
To split the question from the problem
The canvas itself is it not, rather the fact that
oldIE (and else) don't support it. ...And libraries like excanvas or
flashcanvas seems a bit too bloated for this use case...
canvas.getImageData returns an ImageData object that looks like this:
interface ImageData {
readonly attribute unsigned long width;
readonly attribute unsigned long height;
readonly attribute Uint8ClampedArray data;
};
(See the specs: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#imagedata)
I guess you could box your data fitting that interface and try it out.
If you try, let me know how it turns out :)
Alternatively, you could create an in-memory canvas of your desired width/height--document.createElement("canvas"), Then grab its imagedata and plug in your own array. I know this works. Yes...that goes contrary to your question, but you're not adding the canvas to your page.
Is there a reason you don't want to use canvas? This really is what canvas is for. Once you have the image data what would you do with it? Render it in the browser? Send to a server? Download to the user? If the problem is just that you don't want to have a canvas on screen you could create a hidden canvas to do the work.