保存画布图像（将数据字符串发布到PHP） [英] Save Canvas image (Post the data string to PHP)

问题描述

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

I'm looking to learn Javascript and have been wanting to for a while, I got a little tutorial on how to create a HTML5 Canvas drawing application, I'm trying to modify it so I can save the image to my MySQL database. So far, the code below simply redirects to my PHP file and does have the code I'd like, but it's a little big so I was wondering if there was a way to reduce that or possibly even _POST it to the PHP script.

    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是......

I'm using window.location.href to send the data. Any help would be appreciated. The URL which it currently gives is...

localhost / save_server /？image = data：image / png; base64，iVBORw0KGgoAAAANSUhEUgAAA4EAAAIUCAYAAACkdimiaAAgAElEQVR4Xu3XQQEAAAgCMelf2iA3GzD8sHMECBAgQIAAAQIECB ...你知道吗？它太大了，我甚至不打算在这里发布。

localhost/save_server/?image=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA4EAAAIUCAYAAACkdimIAAAgAElEQVR4Xu3XQQEAAAgCMelf2iA3GzD8sHMECBAgQIAAAQIECB... You know what? It is so big, I'm not even going to post it here.

感谢提前任何帮助！

推荐答案

使用表单，并按 POST 方法发送字节：

Use form, and send bytes by POST method:

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();

这篇关于保存画布图像（将数据字符串发布到PHP）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！