Получение абсолютного URL-адреса временного элемента canvas на странице

Question

Получение абсолютного URL-адреса временного элемента canvas на странице

0

Я создал систему купон-создателей, которая использует холст HTML 5, чтобы выплеснуть версию jpg версии купона, которую вы создаете, и поскольку я не размещаю финализированный jpg на сервере, у меня возникают проблемы с получением URL-адреса. В некоторых браузерах, когда я перетаскиваю изображение в адресную строку, все, что я получаю, это "данные:" в адресной строке. Но в окнах, если я перетаскиваю его в поле ввода, иногда он выплескивает огромный (> 200 символов) локальный-temp url. Как я могу использовать javascript (?), Чтобы найти точный временный URL-адрес изображения, созданного моим создателем купона, и иметь возможность опубликовать его на форме ввода на той же странице? Кроме того, было бы очень полезно, если вы, ребята, тоже знаете ответ на этот вопрос, поскольку я полагаю, что он коррелирован с поиском URL-адреса: когда я нажимаю ссылку, которая говорит "Сохранить это" после ее создания, как я могу сохранить ли это созданное изображение на компьютер пользователя? Большое спасибо!

Это то, что я сейчас использую в JS для создания изображения:

              function letsDo() {
                html2canvas([document.getElementById('coupon')], {
                    onrendered: function (canvas) {
                        document.getElementById('canvas').appendChild(canvas);
                        var data = canvas.toDataURL('image/jpeg');
                        // AJAX call to send 'data' to a PHP file that creates an image from the dataURI string and saves it to a directory on the server

                        var mycustomcoupon = new Image();
                        mycustomcoupon.src = data;
                        //Display the final product under this ID
                        document.getElementById('your_coupon').appendChild(mycustomcoupon);
                        document.getElementById('your_coupon_txt').style.display="block";
                    }
                });
              }

Вот живой URL-адрес создателя: http://isleybear.com/coupon/

toad 16 фев. 2014, в 01:58

Источник

Теги:

javascript

jquery

html

canvas

data-url

1 ответ

Ещё вопросы

toad · Accepted Answer · 2014-02-18T22-51-00.000Z

Я закончил тем, что сбросил этот код в js, указанный выше. Это было довольно простое решение. Затем, чтобы проверить его, я установил элемент onclick html, чтобы показать источник.

var mycustomcoupon = document.getElementById('your_coupon');
mycustomcoupon.src = data;

}
});
}


function showSource(){

var source = document.getElementById('your_coupon').src;
                        alert(source);
}