Javascript 通过动态创建默认值为画布图像的html文件元素上载克隆的画布照片

我正在尝试将图像过滤器应用于图像，并在每次单击过滤器时重新创建file元素。因此，代码可能是伪代码。它仍然说文件字段是空的，我不知道为什么

我正试图将该文件传递给处理上传的php脚本，但我不确定如何在脚本中实现，因为我的javascript技能不够好

HTML

&时代；
选择图片作为个人资料图片上传。





















-
接近

JavaScript:

$（函数（）{
/*
在此代码中，我们将执行以下操作：
1.通过拖放接受图像
2.创建一个最大尺寸的新画布元素（原始）
500x500px（可定制），并将其保存在内存中
3.倾听过滤器上的点击。选择一个过滤器时：
3.1创建原始画布的克隆
3.2删除页面上当前的所有画布元素
3.3将克隆附加到#photo div
3.4如果所选过滤器不同于“正常”
第一，给卡曼图书馆打电话，否则什么也不做。
3.5用“激活”等级标记所选过滤器
4.触发“正常”过滤器
*/
var maxWidth=500，
最大高度=500，
照片=$（“#照片”），
originalCanvas=null，
filters=$（“#filters li a”），
filterContainer=$（“#filterContainer”）；
//使用fileReader插件来侦听
//在photo div上拖放文件：
photo.fileReaderJS({
关于：{
加载：函数（e，文件）{
//图像已被删除。
var img=$（''）；
//显示下载按钮
showDownload（克隆[0]）；
}
否则{
隐藏下载（）；
}
});
});
//使用鼠标滚轮插件滚动
//更直观地滚动div
filterContainer.find（'ul'）。在（'mousewheel'，函数（e，delta）上{
这个.scrollLeft-=（增量*50）；
e、 预防默认值（）；
});
var downloadImage=$（'a.downloadImage'）；
函数显示下载（画布）{
下载image.off（'click'）。单击（函数（）{
//单击下载链接时，获取
//图像的DataURL，并将其设置为href:
var url=canvas.toDataURL（“image/png；base64；”）；
downloadImage.attr（'href'，url）；
}).fadeIn（）；
}
函数hiddedownload（）{
下载image.fadeOut（）；
}
});

PHP:

根据Rayon的评论，我正在做以下工作：

这是在每次单击筛选器时将base64追加到我的主页上的表单数据。因此，当有人单击upload时，它会将数据发送到pho脚本

var fd = new FormData(document.getElementById("fileinfo"));
fd.append("file_upload", clone[0].toDataURL("image/png;base64;"));

下面是我当前处理AJAX请求的JavaScript：

函数submitForm（）{
if（get_user！=logged_username）{}else{
var d=新日期（）；
var time=d.getTime（）；
//log（document.getElementById（“文件”）；
var fd=新表单数据（document.getElementById（“fileinfo”）；
//控制台日志（fd）；
fd.append（“用户名”，登录的用户名）；
附加（“时间戳”，时间）；
$.ajax({
url:“upload_photo.php”，
类型：“POST”，
数据：fd，
enctype:“多部分/表单数据”，
processData:false，//告诉jQuery不要处理数据
contentType:false//告诉jQuery不要设置contentType
}).完成（功能（数据）{
if（data.indexOf（“无效”）>=0）{
警报（'无效的文件类型，必须是jpeg、jpg或png'）；
}否则{
var post={
“PICU位置”：数据，
“时间”：时间，
“用户名”：登录的用户名
};
控制台日志（数据）；
var json_data=post；
Cynergi.insert（'http://thhd.com:3000/profile_pictures，json_数据）；
//这是我们将照片位置保存到数据库以便检索的地方。
}
});
返回false；
}
}

然后是php：

日志输出显示：

数据：图像/png；base64，Ivborw0Kggoaaaansuhueugaaaafqaaah0cayaaaadl1t+KAAAgAElEQ…p3peerm0gn4j7ve4xytdlt34vfumbuiynl6xlqku4v8bz033tp7lxcwaaaasuvork5cyii=

php返回无法保存文件，并保存一个0字节的文件

---

这是可行的，但它会放入一个0字节的文件，我不知道为什么。

不需要文件输入。您可以在画布上绘制图像，并在用户每次操作后重新绘制，如果您愿意存储该图像，则需要使用php脚本将图像的Base64数据处理为图像。

不知道如何操作：）但我至少有方向您是否根据用户操作实现了画布数据处理？如果是，则剩下很小的任务..WaywardTravely.com为用户注册单击“加载”部分上的相机图标