How to get the base64 dimensions of an image?

Question

HTML

There is a code, the variable in it "contains" the base64 code of the image. How to get image width and height?

Answer 1

If you want it to be a solid block, then, as far as I know, no way. You can use a picture together with holes, then inline elements will wrap around it.

Answer 2

like this

.square,
.square:before,
.square:after {
  border: solid #000 3px;
}
.square {
  position: relative;
  width: 100px;
  height: 100px;
  border-left: 0;
  margin: 0 auto;
}
.square:before,
.square:after {
  content: '';
  display: block;
  position: absolute;
  border-right: 0;
}
.square:before {
  top: 0;
  right: 100%;
  width: 150%;
  height: 40px;
  margin: -3px -3px 0 0;
}
.square:after {
  left: 0;
  top: 40px;
  bottom: 0;
}

jsfiddle.net

Answer 3

For example, like this: codepen.io/anon/pen/wGvwwN

Answer 4

No way. The block can only be rectangular. There is not one block, but two.

Answer 5

A solid block will not work in any way ... you can only cut down similar garbage, as in the picture ... but why is it and for what, such a block, its function - that's another question what is needed !!!!

Answer 6

var image = document.createElement('img');

image.addEventListener( 'load', function() {
    // get image.width & image.height
});

image.src = 'data:image/png;base64,…';

eg: jsfiddle.net/minitech/KDdyJ