[英]Save Canvas and Pop-up in new HTML window
My html 5 canvas is being saved to a server via php. 我的html 5 canvas通过php保存到服务器。 It also pops up in a new window that is not html. 它还会在非html的新窗口中弹出。 The new window only contains the png image. 新窗口仅包含png图像。 I would like this new popup window to be able to share to social media. 我希望这个新的弹出窗口能够与社交媒体共享。 I know about auth2.0 and setting that up. 我知道auth2.0并进行设置。 What I don't know is how to get my png created from the saved canvas to popup on a new html page so I can add my social media tools. 我不知道如何从保存的画布创建我的png并在新的html页面上弹出,以便添加社交媒体工具。 I am pretty sure it would be an edit to this line, window.open(testCanvas.toDataURL("images/png"));. 我很确定这将是对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);
}
New example without server side (using localStorage) 没有服务器端的新示例(使用localStorage)
On the first page: 在第一页上:
<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>
In the popup page: 在弹出页面中:
<img src="" id="thepicture" />
<script>
window.onload = function() {
document.getElementById('thepicture').src = localStorage.getItem('img');
};
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.