Сохранить холст и всплывающее окно в новом окне HTML

Question

Сохранить холст и всплывающее окно в новом окне HTML

0

Мой холст html 5 сохраняется на сервере через php. Он также появляется в новом окне, которое не является html. Новое окно содержит только png-изображение. Я хотел бы, чтобы это новое всплывающее окно могло быть доступно для социальных сетей. Я знаю об auth2.0 и настройке. Я не знаю, как получить мой png, созданный из сохраненного холста, на всплывающее окно на новой странице html, чтобы я мог добавить свои инструменты для социальных сетей. Я уверен, что это будет редактирование этой строки, window.open(testCanvas.toDataURL("images/png")).

function saveImage() {
cursor.visible = false; stage.update();
var canvasData = testCanvas.toDataURL("image/png");
window.open(testCanvas.toDataURL("images/png"));
var xmlHttpReq = false;       
if (window.XMLHttpRequest) {
ajax = new XMLHttpRequest();
cursor.visible = true; stage.update();
}

else if (window.ActiveXObject) {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
ajax.open('POST', 'testSave.php', false);
ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
ajax.onreadystatechange = function() {
console.log(ajax.responseText);
}
ajax.send("imgData="+canvasData);
}

Paul Rad 03 окт. 2013, в 20:17

Источник

Теги:

php

javascript

html

html5-canvas

1 ответ

Ещё вопросы

Paul Rad · Answer 1 · 2013-10-03T14-43-00.000Z

Новый пример без серверной части (с использованием localStorage)

На первой странице:

<input type="file" id="upfile" />
<script>
    $ = function(id) { return document.getElementById(id); };

    $('upfile').onchange = function(e) {
        var files = e.target.files;
        for (var i = 0; i < files.length; i++)
        {
            var f = files[i];
            if (! f.type.match('image.*'))
                continue;
            var reader = new FileReader();
            reader.onload = (function(filecontent) {
                return function(ev) {
                    var b64data = ev.target.result;
                    localStorage.setItem('img', b64data);
                    window.open('popup.html', 'popup', 'width=600,height=400');
                };
            })(f);
            reader.readAsDataURL(f);
        }
    };
</script>

На всплывающей странице:

<img src="" id="thepicture" />

<script>
window.onload = function() {
    document.getElementById('thepicture').src = localStorage.getItem('img');
};
</script>

Проверьте рабочую демонстрацию здесь

Это не определяет HTML-страницу для открытия, в которой я могу добавить инструменты. Кроме того, функция сохранения не работает.
Пол Рад, не могли бы вы объяснить немного больше?
У меня все еще проблемы с этим. Когда я подключаю нашу первую строку, функция сохранения перестает работать. В месте назначения я хотел бы открыть его на HTML-странице, которую я уже создал с установленными социальными плагинами.
я создам рабочую демонстрацию после того, как я сейчас занят;) следите за обновлениями.
Вы все еще в состоянии построить работающую модель Пола?
Я очень ценю помощь. Мне трудно сказать, где заканчивается сохранение файла и начинается всплывающий код. Я не пытаюсь загрузить и сохранить. Я сохраняю холст в HTML5, который был нарисован. Я хотел бы, чтобы холст сохранился как изображение и появился в новом html-окне. Я знаю основы JavaScript. Я изучаю его около двух месяцев.
Эй, Пол, как мне сделать так, чтобы «кнопка сохранения», а не «кнопка загрузки», вот мой код кнопки. <button onclick = "saveImage ();" id = "saveIt"> Сохранить и опубликовать в социальных сетях </ button>