gpt4 book ai didi

javascript - 使用 Javascript 将 div 内容作为图像附加到 formData

转载 作者:行者123 更新时间:2023-12-03 05:09:28 26 4
gpt4 key购买 nike

我有一个 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.jscanvas-toBlob.js

最佳答案

好吧,为了那些可能面临同样问题的人,这就是我最终所做的,并且效果很好:

 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

附上我上传的示例图片。 enter image description here

关于javascript - 使用 Javascript 将 div 内容作为图像附加到 formData,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41883985/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com