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);
}
4

1 回答 1

0

没有服务器端的新示例（使用 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>

在此处查看工作演示

于 2013-10-03T17:43:12.507 回答