2
For example, we have this boat:
<div>
<img src="https://cdn2.vectorstock.com/i/thumb-large/94/56/lifeboat-vector-3669456.jpg" >
</div>In this case, I want the white color (#FFFFFF) transparent, but it could be any other.
How to do this, if possible..?
2
var img = new Image()
img.onload = function(event){ getData(event) }
img.src = 'lifeboat-vector-3669456.jpg'
function getData(ev){
canvas = document.createElement('CANVAS')
canvas.width = ev.target.naturalWidth
canvas.height = ev.target.naturalHeight
context = canvas.getContext('2d')
try{ context.imageSmoothingEnabled = false } catch(e){ context.msImageSmoothingEnabled = false }
context.drawImage(img, 0, 0, canvas.width, canvas.height)
imgData = context.getImageData(0, 0, canvas.width, canvas.height)
for( i = 0; i < imgData.data.length; i += 4 ){
imgData.data[i] = 1.2*imgData.data[i] + 0*imgData.data[i+1] + 0*imgData.data[i+2] + 0*imgData.data[i+3] + -0.2
imgData.data[i+1] = 0*imgData.data[i] + 1.2*imgData.data[i+1] + 0*imgData.data[i+2] + 0*imgData.data[i+3] + -0.2
imgData.data[i+2] = 0*imgData.data[i] + 0*imgData.data[i+1] + 1.2*imgData.data[i+2] + 0*imgData.data[i+3] + -0.2
}
// cor branca #FFFFFF (R=255, G=255, B=255) => transparente (Alfa=0)
for( i = 0; i < imgData.data.length; i += 4 ) if( imgData.data[i] == 255 && imgData.data[i+1] == 255 && imgData.data[i+2] == 255 ) imgData.data[i+3] = 0
context.putImageData(imgData, 0, 0)
image.src = canvas.toDataURL()
}<div style="background-color: aquamarine;">
<img id="image" src="" />
</div>
Greetings John, could you explain what you did in the answer?
-2
There is a CSS property that allows you to "hide" the background color of an image, but that image has to be set to background.
The background of the div that has the image has to be the same background color as the page, the color you want to replace the white one with. The example in Jsbin.
background-image: url(lifeboat-vector-3669456.jpg);
background-color: grey; /* aqui será a cor de fundo da página */
background-blend-mode: multiply;
But not supported on all browsers, and may not work properly with all colors.
I would suggest using a server-side solution, using PHP or any other language you are using.
-5
Change the opacity of the image so it becomes more transparent you can use 0.01 until glhf
<div>
<img style="opacity: 0.1;" src="https://cdn2.vectorstock.com/i/thumb-large/94/56/lifeboat-vector-3669456.jpg" >
</div>Try So
Explain better why of your code. So the user understands where it went wrong and not only "makes it work"
Browser other questions tagged javascript css image opacity
You are not signed in. Login or sign up in order to post.
You will probably have to use a canvas and run pixel by pixel to "copy" the original image less transparent pixels. It would be better to edit the question with more sample images, because the "but could be any other" part seems to have been totally ignored in all the answers. Put one against a background of another color, so it will help identify which answers actually work.
– Bacco