Set Background-Image to a Blob: Uri

Set background-image to a blob: URI

Try this:

<script>
var tmp_path = URL.createObjectURL('path/to/image.png');
document.getElementbyId('divId').style.background = url(tmp_path);
</script>

How to set background image to blob url

Your answer seems quite similar to this question: Set background-image to a blob: URI

The answer by JosephDFGX might work for you:

<script>
    var tmp_path = URL.createObjectURL('path/to/image.png');
    document.getElementbyId('divId').style.background = tmp_path;
</script>

How to use a blob URL as an image source in Chrome's Global Media Controls?

I ended up using JPG images which work just fine.

So, my conclusion is: you can use a blob URL as an artwork source, as follows:

navigator.mediaSession.metadata.artwork = [
    {
        sizes: '150x200',
        src: 'blob:https://blablabla.com/4065a1d2-a23b-4cff-8ccd-3c6bce6e3b55',
        type: 'image/jpeg'
    }
];

My other conclusion is that there's a bug with PNG images (see EDIT 1 in my question).

Is it possible to set backgroundImage with created image in JavaScript?

You can't just simply assign the data returned by .toDataURL() to the backgroundImage property as it expects it to be wrapped inside "url()".

Here's an example:

var canvas1 = document.getElementById("firstCanvas");var ctx1 = canvas1.getContext("2d");var canvas2 = document.getElementById("secondCanvas");var ctx2 = canvas2.getContext("2d");
ctx1.beginPath();ctx1.arc(50, 50, 40, 0, 2 * Math.PI);ctx1.stroke();
function transform() {  var dataURL = canvas1.toDataURL("image/png");  canvas2.style.backgroundImage = "url(" + dataURL + ")";}transform();

<canvas id="firstCanvas" width="100" height="100"></canvas><canvas id="secondCanvas" width="100" height="100"></canvas>

How to set an image as a background image in html using input type= file ?

Simply wrap the File blob into an Object-URL (URL.createObjectURL) and set that as source for the CSS background image.

This will simplify your code, the image will be processed faster and image size will be less of a problem:

document.querySelector("input").onchange = function() {  var url = URL.createObjectURL(this.files[0]);  document.body.style.background = "url(" + url + ") no-repeat";}

<input type="file">

CSS background-image renders as url('undefined'); even though I defined it. (JSX)

@J. Doe,
I got your problem. It is worth raising an issue with react team to debug more. But the route cause/fix i have in place is as below. Hope that helps!

Root cause:

When series of css class names have -, the inline url is set to undefined.

Workaround: (either one of the below)

• Remove the additional class set-bg.
• Replace the - in the class names.

Sample html

    <div className="col-md-6">
      <div className="propertie-item set_bg" style={ { backgroundImage: "url('https://s3.us-east-2.amazonaws.com/housessoldeasily.com/img/propertie/4.jpg')" } }>
        <div className="rent-notic">FOR Rent</div>
        <div className="propertie-info text-white">
          <div className="info-warp">
            <h5>339 N Oakhurst Dr Apt 303</h5>
            <p><i className="fa fa-map-marker" /> Beverly Hills, CA 90210</p>
          </div>
          <div className="price">$3000/month</div>
        </div>
      </div>
    </div>

CSS

.set_bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;

}

---

Related Topics