使用 Javascript 将 div 内容作为图像附加到 formData答案

【问题标题】：Append div content as an image to formData using Javascript使用 Javascript 将 div 内容作为图像附加到 formData
【发布时间】：2017-06-12 13:05:31
【问题描述】：

我有一个 div，其内容从服务器动态填充并绘制一些条形图，之后我尝试获取相同的 div 并将其附加到表单数据中，以便将其保存为服务器上的图像。第一部分工作完美（绘制图表）。我用下面的代码尝试的第二部分只上传了一个没有图表内容的空 PNG 文件。

 $("#myChart").get(0).toBlob(function(blob) {
                    var image = blob;
                    var forms = document.querySelector('form#chartData');
                    var request = new XMLHttpRequest();
                    var formDatas = new FormData(forms);
                    formDatas.append('chartImage', blob, "chart.png");
                    request.open('post','/sendToServer');
                    request.send(formDatas);
                    request.onreadystatechange = function() {
                        if (request.readyState === 4) {
                            if (request.status === 200) {

                                /*File Uploaded*/

                            }
                        }
                    }
                });

但是，当我使用saveAs(blob, "chart_1.png") 时，图像已成功下载，并且图表绘制得很好。我不知道我是否错过了什么。任何帮助表示赞赏。我正在使用FileSaver.js 和canvas-toBlob.js

【问题讨论】：

标签： javascript jquery html canvas fileserver

【解决方案1】：

好吧，为了那些可能面临同样问题的人，这就是我最终做的事情，它工作正常：

 html2canvas([document.getElementById('myChart')], {
                        onrendered: function (canvas) {
                            var imagedata = canvas.toDataURL('image/png');
                            var imgdata = imagedata.replace(/^data:image\/(png|jpg);base64,/, "");
                            console.log(imgdata);
        //ajax call to save image inside folder
        $.ajax({
            url: '/sendToServer',
            data: {
             chartImage:imgdata
         },
         type: 'post',
         success: function (response) {   
             console.log(response);
               //$('#image_id img').attr('src', response);
           }
       });
    }
});

然后是 PHP 脚本来处理上传

$imagedata = base64_decode($_POST['imgdata']);
        $filename = md5(uniqid(rand(), true));
        $file = $_SERVER['DOCUMENT_ROOT'] . '/images/'.$filename.'.png';
        $imageurl  = 'http://127.0.0.1'.$filename.'.png';
        file_put_contents($file,$imagedata);
        return $file;

注意：html2canvas.js 必填。

附上我上传的示例图片。

【讨论】：