保存画布图像（将数据字符串发布到 PHP）

Posted 2023-03-15

【中文标题】保存画布图像（将数据字符串发布到 PHP）

【英文标题】：Save Canvas image (Post the data string to PHP)

【发布时间】：2012-07-08 06:51:50

【问题描述】：

我正在寻找学习 javascript 并且一直想要学习一段时间，我有一个关于如何创建 html5 Canvas 绘图应用程序的小教程，我正在尝试修改它以便我可以将图像保存到我的 mysql数据库。到目前为止，下面的代码只是简单地重定向到我的 php 文件并且确实有我想要的代码，但它有点大，所以我想知道是否有办法减少它甚至可能 _POST 到 PHP 脚本。

    saveAsPNG : function(oCanvas, bReturnImg, iWidth, iHeight) 
        if (!bHasDataURL) 
            return false;
        
        var oScaledCanvas = scaleCanvas(oCanvas, iWidth, iHeight);
        var strData = oScaledCanvas.toDataURL("image/png");
        window.location.href = "http://localhost/save_server/?image=" + strData;
        if (bReturnImg) 
            return makeImageObject(strData);
         else 
            saveFile(strData.replace("image/png", strDownloadMime));
        
        return true;
    ,

我正在使用 window.location.href 来发送数据。任何帮助，将不胜感激。它当前提供的 URL 是...

localhost/save_server/?image=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA4EAAAIUCAYAAACkdimIAAAgAElEQVR4Xu3XQQEAAAgCMelf2iA3GzD8sHMECBAgQIAAAQIECB... 你知道吗？太大了，这里就不贴了。

提前感谢您的帮助！

【问题讨论】：

developer.mozilla.org/en/AJAX

【参考方案1】：

使用form，通过POST方法发送字节：

var form = document.createElement("form");
form.setAttribute("action","http://localhost/save_server/");
form.setAttribute("enctype","multipart/form-data");
form.setAttribute("method","POST");
form.setAttribute("target","_self");
form.innerHTML = '<input type="hidden" name="image" value="'+strData+'"/>';
form.submit();

【讨论】：

@user1510397 如果它有效，那么您可能可以accept它