实施例

Question

我有一个带有background-image属性的dom元素。

在画布上绘制背景图像的最佳方法是什么？

编辑：我能想到这样做的唯一方法是从background-image属性中提取URL，然后将其加载到图像对象中，然后绘制它。

Answer 1

是的，提取background-image属性的URL是最好的方法。但有几点需要注意：

如果使用CSS规则定义背景图片，则style属性无法使用它。
还有快捷方式background:，可以包含颜色，大小等。
网址的字符串可能会也可能没有格式化为url("")，如果需要将其删除，则可以包含引号或不包括引号。

使用样式属性或CSS规则设置URL的最佳和更安全的方法是在窗口对象上使用getComputedStyle()。这将为您提供适合该特定样式的格式化字符串：

var computedRules = window.getComputedStyle(element);

从那里获取浏览器使用getPropertyValue()格式化的字符串：

var urlStr = computedRules.getPropertyValue("background-image");

结果将取决于浏览器 -

火狐：

URL（＆＃34; http://domain.to/img.png＆＃34）

Chrome（无引号）：

URL（http://domain.to/img.png）

您可以使用各种技术从RegEx中逐步删除URL（＆＃34;＆＃34;）部分。前者有时更简单，因为如果必须包括新标准，它可以很容易地扩展，而后者往往表现更好（但这不会成为问题）。

实施例

当放在一起时你可以使用这样的东西（清理URL时你可能必须覆盖其他情况，而不是在这个小例子中）：

＆＃13;

var div = document.querySelector("div"),
    url = cleanURL(getComputedStyle(div).getPropertyValue("background-image")),
    img = new Image();

// use async handler for image loading:
img.onload = function() {
  var ctx = document.querySelector("canvas").getContext("2d");
  ctx.drawImage(this, 0, 0);
  // continue from here...
};
img.src = url;

function cleanURL(url) {
  if (!url.length || url === "none") return "";
  var p1 = url.indexOf("("), p2;
  if (p1 > -1) {
    p2 = url.lastIndexOf(")");
    if (p2 > -1) url = url.substring(p1+1, p2);
  }
  p1 = url.indexOf("\"");
  if (p1 > -1) {
    p2 = url.lastIndexOf("\"");
    if (p2 > -1) url = url.substring(p1+1, p2);
  }
  return url
}

＆＃13;

div {
  width:200px;height:50px;
  background-image:url(https://i.imgur.com/nq5XI6O.png)
  }

＆＃13;

Div w/background-image: <div></div><br>
Canvas:<br><canvas width=200 height=50></canvas>

＆＃13;

画布：绘制另一个dom元素的backgroundImage

1 个答案:

实施例