我有一个带有背景图片、自定义背景大小(自动 + %)和自定义背景位置(x% y%)的 div。
所以我有所有这些数据:
- div 宽度
- div 高度
- div 背景大小
- div bg 图片宽度
- div bg 图片高度
- div bg 图片位置x
- div bg 图像位置 y
例如:
- div 宽度:200px
- div 高度:100px
- div bg 大小:自动 105%
- div bg 图片宽度:400px
- div bg 图片高度:280px
- div bg 图片位置 x: 20%
- div bg 图片位置 y:12%
我需要将其转换为 PX 值,以便我可以在 Canvas 中重新创建它。
当我拥有所有的值时,我会做类似的事情:
ctx.drawImage(img, sx, sy, swidth, sheight, 100, 100, 200, 100).
但我需要使用 sx、sy、swidth 和 sheight 来裁剪图像,它们是裁剪的起始坐标以及裁剪的宽度和高度。
谢谢!
诀窍是将百分比背景位置转换为等效的像素值。在这个例子中,你这样做:((图像宽度 - div 宽度)* 背景百分比)。查看代码时看起来要复杂得多,但这是一个工作示例:
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>
鉴于您将使用的实际值,您当然可以根据需要进行调整。我有一个 div,其中应用了给定您的示例值的背景图像,然后是一个 Canvas ,根据您正在寻找的条件绘制相同的东西。
JSFiddle
我是一名优秀的程序员,十分优秀!