Use Javascript image path inside css class

Question

Background

In the website , i am displaying mask image path as below :

<script>
var cardConfig = { "pages": [{ "name": "/images/invitations/birthday/ice1.png", }], }
</script>

I am allowing user to upload an image inside mask image....

Once user upload image, I am filling user uploaded image inside mask image :

1.Mask image :

2.user uploaded image :

3.User uploaded image on mask [Final image ] :

Codepen : https://codepen.io/kidsdial2/pen/OdyemQ

JSfiddle : http://jsfiddle.net/2xq8p0zy/

Html

<body>
  <img src="http://139.59.24.243/images/invitations/birthday/a.jpg" alt="">
</body>

css

body {
  background-color: #111;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

img {
  margin: 20px auto;
  display: block;
  width: 100%;
  height: 500px;
  -webkit-mask-image: url(http://139.59.24.243/images/invitations/birthday/ice.png);
  mask-image: url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/mask-image/mask-image.png);
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

Requirement:

Here to fill uploaded image inside mask image , i am using below css code to display mask image.... But Instead of using css code mask image, i want to use html code mask image in this process......

css mask image code

-webkit-mask-image: url(http://139.59.24.243/images/invitations/birthday/ice.png);

Html mask image code :

<script>
    var cardConfig = { "pages": [{ "name": "/images/invitations/birthday/ice1.png", }], }
    </script>

I swear I saw an extremely similar question last week. Did you ask this again or some other teammate? — YetAnotherBot, Jan 30 '19 at 11:45
Oh. Saw your other 2 questions too. Are you planning to get everything done through community? — YetAnotherBot, Jan 30 '19 at 11:46
@AdityaGupta Thanks for your comments, all are different questions, please read again & i tried a lot before posting a single question...... — , Jan 30 '19 at 11:55
For tracking and background information, this is related to https://stackoverflow.com/questions/54364232 — andyb, Jan 30 '19 at 12:15
What exactly is the question? Do you want to change the css? Does it have to change the class (that's rather uncommon) or can it be inside a style attribute? Do you ask how you can put a blob inside a css selector? — SourceOverflow, Jan 30 '19 at 15:04
Yes, I want to change the CSS , but I don't want to change the class , instead of giving path through the CSS class url , I want to give the JavaScript path for the image , please let me know if you need more information @sourceoverflow — , Jan 30 '19 at 15:22
Just re-read your question. Is `imageNode.src = 'file-link'` what you want? Like in this pen: https://codepen.io/anon/pen/GzNXMr — SourceOverflow, Jan 30 '19 at 15:35
@sourceoverflow in CSS part , for image class , there is a code URL ice.PNG , instead of using this CSS path , in question I posted HTML script code Path , if it is possible I want to use that path, basically I don't want to use the CSS URL path.... — , Jan 30 '19 at 15:48
HTML does not have a way to make a mask, that is the job of the css. If you want, you can make a style attribute like this: `` If you want to later change it using js, you will have to change the style attribute. I haven't posted this as an answer, because, I'm afraid I'm still not 100% sure, this is what you want. — SourceOverflow, Jan 30 '19 at 15:53
Sorry for delay as I am texting from mobile , I I am ready to use the CSS for mask , but I don't want to give the URL of the image through the CSS , instead I want to give the URL path by the help of HTML script code I posted in question, can we use HTML script code inside CSS class? — , Jan 30 '19 at 16:10
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/187589/discussion-between-vickey-colors-and-sourceoverflow). — , Jan 30 '19 at 16:10

score 0 · Accepted Answer · answered Jan 31 '19 at 12:40

You will have to change the style programmatically in your js. Like this:

const targetDiv = document.getElementById('target')

function changeColorTo(hex) {
  // you can change single attributes like this
  targetDiv.style.backgroundColor = hex
  
  // alternatively you can override all of the local styles like this
  targetDiv.setAttribute('style', `background-color:${hex};`)
  // or
  targetDiv.style.cssText = `background-color:${hex};`
}

#target {
  width: 5rem;
  height: 5rem;
  border: 1px solid black;
}

<div id="target"></div>
<button onclick="changeColorTo('#00f')">Change to Blue</button>
<button onclick="changeColorTo('#0f0')">Change to Green</button>
<button onclick="changeColorTo('#f00')">Change to Red</button>

In the same way, you can change the mask:

target.style.webkitMaskImage = 'url(https://…)'
target.style.maskImage = 'url(https://…)'

Use Javascript image path inside css class

1 Answers1