Convert background-size and background-position relative values to absolute PX values

Question

I have a div with a background image, a custom background size (which is auto + %), and a custom background position (which is x% y%).

So I have all this data:

div width
div height
div bg size
div bg image width
div bg image height
div bg image position x
div bg image position y

For example:

div width: 200px
div height: 100px
div bg size: auto 105%
div bg image width: 400px
div bg image height: 280px
div bg image position x: 20%
div bg image position y: 12%

I need to convert this to PX values to I can recreate it in a canvas.

When I have all the values, I would do something like:

ctx.drawImage(img, sx, sy, swidth, sheight, 100, 100, 200, 100).

But I need to clip the image using sx, sy, swidth and sheight which are the starting coordinates of the clipping and and width and height of the clipping.

Thanks!

BSK BSK · Accepted Answer · 2018-03-22T21:34:05

The trick is converting the percentage background position to the equivalent pixel values. In this example, you do it this way: ((image width - div width) * background percentage). It looks much more complicated when looking at the code but here is a working example:

var testDiv = $("#test");
var bgImgSize = testDiv.css("background-size").replace(/px|%/g, "").split(" ");
var bgImgPosition = testDiv.css("background-position").replace(/px|%/g, "").split(" ");
var bgImgXPosition = (bgImgPosition[0] == 100) ? (bgImgSize[0] - testDiv.width()) : ((bgImgSize[0] - testDiv.width()) * (bgImgPosition[0] * .01));
var bgImgYPosition = (bgImgPosition[1] == 100) ? (bgImgSize[1] - testDiv.height()) : ((bgImgSize[1] - testDiv.height()) * (bgImgPosition[1] * .01));

var props = {
  "divWidth": testDiv.width(),
  "divHeight": testDiv.height(),
  "bgImgWidth": bgImgSize[0],
  "bgImgHeight": bgImgSize[1],
  "bgImgXPosition": bgImgXPosition,
  "bgImgYPosition": bgImgYPosition,
  "bgImg": "https://images.pexels.com/photos/7102/notes-macbook-study-conference.jpg?auto=compress&cs=tinysrgb&h=280&w=400"
}

var c = document.getElementById("test-canvas");
var ctx = c.getContext("2d");
var img = new Image();
img.onload = function() {
  ctx.drawImage(img, props.bgImgXPosition.toFixed(2), props.bgImgYPosition.toFixed(2), props.divWidth, props.divHeight, 0, 0, props.divWidth, props.divHeight);
};
img.src = props.bgImg;

#test {
  width: 200px;
  height: 100px;
  background-image: url(https://images.pexels.com/photos/7102/notes-macbook-study-conference.jpg?auto=compress&cs=tinysrgb&h=280&w=400);
  background-repeat: no-repeat;
  background-size: 400px 267px;
  background-position: 20% 12%; /* Original position */ 
  /* Pixel equivalent: background-position: -40px -20.04px;*/
  /* (image width - div width) *  x background position, (image height - div height) *  y background position */	
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test"></div>
<canvas id="test-canvas" width="200px" height="100"></canvas>

You can certainly adjust as necessary given the actual values you'll be working with. I have a div with the background image applied given your example values and then a canvas drawing the same thing with the conditions you're looking for.

JSFiddle

Convert background-size and background-position relative values to absolute PX values

1 Answers