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

Question

Мой холст 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); 
} 

Answer 1

Новый пример без стороне сервера (с помощью 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> 

Check the working demo here