Получить HTML-фоновое изображение объекта на стороне клиента - PullRequest
Новая
       22

Получить HTML-фоновое изображение объекта на стороне клиента

0 голосов
/ 11 января 2012

Справочная информация: Я написал веб-сайт, который используется для создания электрических схем, на которых пользователь перетаскивает продукт из списка в блок и появляется продукт. Продукт - это div с классом, названным названием продукта, а изображение находится в свойстве background-image класса.

Проблема: Сейчас я пытаюсь реализовать функцию «сохранить как изображение». Я перебираю элементы div и беру URL-адрес фонового изображения и использую URL-адрес в качестве источника изображения: 

        var image = new Image();
        image.onload = function () {
            context.drawImage(image, parseInt(left), parseInt(top));
        };
        image.src = $(this).css('background-image').replace(/"/g, "").replace(/url\(|\)$/ig, "");

После этого я конвертирую изображение в png и показываю его. 

var img = canvas.toDataURL('image/png');
document.write('<img src="' + img + '"/>');

Результатом является пустое изображение.

Что я пробовал: Я подозреваю, что моя проблема в том, что я передаю отформатированный URL-адрес источнику изображения, а браузер снова получает изображение с сервера. Этот тур происходит медленнее, чем код. Я подтвердил это, разделив блоки кода на отдельные функции и вызвав их по отдельности: один рисовал холст, а другой преобразовывал и отображал изображение. Каждая функция запускается отдельными кнопками. Это работает, поэтому добавленные промежуточные функции задержки позволяют загружать изображения.

Вопрос: Я думаю, что я собираюсь получить объект изображения неправильно. Как я могу получить кэшированный объект изображения, который является фоновым изображением div. Изображение в клиенте, и я не могу найти в Интернете ничего, что могло бы найти этот объект. Я думаю, что это глупо просто. Спасибо за любую помощь.

...