Холст: рисовать backgroundImage ДРУГОЙ элемент dom

Question

У меня есть элемент dom с свойством background-image.

Каков наилучший способ нарисовать это фоновое изображение на холсте?

Редактировать: Единственный способ, которым я могу это сделать, это извлечь URL из свойства background-image, затем загрузить его в объект изображения и его рисование.

Answer 1

Да, извлечение URL-адреса для свойства background-image - лучший способ. Но есть несколько предостережений:

• Если фоновое изображение определяется с помощью правила CSS не будет доступен на style собственности.
• Существует ярлык background:, а также которые могут содержать цвет, размер и т.д.
• Строка для URL может или не может быть отформатирован с surrouding url("") который должен быть отогнан, если она есть, она может включать в кавычки или не.

Лучший и безопасный способ получить URL-адрес независимо от того, где он установлен с использованием атрибута стиля или правила CSS, заключается в использовании getComputedStyle() на объекте окна. Это даст вам соответствующие отформатированные строки для конкретного стиля:

var computedRules = window.getComputedStyle(element); 

Оттуда получить строку, отформатированные в браузере с помощью getPropertyValue():

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

Результат будет что-то вроде этого в зависимости от браузера -

Firefox:

URL (»http://domain.to/img.png ")

Chrome (без кавычек):

URL (http://domain.to/img.png)

Вы можете использовать различные методы, чтобы сдирать URL (" ") часть, от RegEx к шагу ий шаг. Первый иногда проще, поскольку он может быть легко расширен, если новые критерии должны быть включены, в то время как последние имеют тенденцию работать лучше (но это не будет проблемой здесь).

Пример

Если положить вместе, вы можете использовать что-то вроде этого (возможно, придется покрыть другие ситуации, когда очистку URL, чем я в этом маленьком примере):

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 
 
}

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

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