Javascript 阻止用户使用ajax提交自己的图像？

我一直在用这种方法让人们在画布上画东西，然后上传到服务器上。 除了人们能够插入自己的图像外，它工作正常（我的朋友测试过）

它的作用如下：

人员单击“提交”，其画布将保存到base64中，并使用$.post（）发送

$.post（）中的php文件运行并将文件保存到服务器中的文件中

有没有办法阻止用户提交他们自己的图像，我已经检查了图像尺寸等等，但他们只是调整大小并提交。（由于我的服务器太小，我认为php绘制图像矩形的能力不起作用）

有没有办法阻止用户提交自己的图像

没有

任何人都可以完全绕过你的客户端代码上传他们想要的任何东西。除了骇人的启发法，你对此无能为力。（他们在页面上有一段时间了吗？是否检测到鼠标移动或触摸屏幕？他们真的画了什么东西吗？）这些东西也可能是伪造的，这只是一个更麻烦的问题。不要为此烦恼，你会给自己制造比你能解决的更多的问题

有没有办法阻止用户提交自己的图像

没有

---

任何人都可以完全绕过你的客户端代码上传他们想要的任何东西。除了骇人的启发法，你对此无能为力。（他们在页面上有一段时间了吗？是否检测到鼠标移动或触摸屏幕？他们真的画了什么东西吗？）这些东西也可能是伪造的，这只是一个更麻烦的问题。不必为此费心，您将为自己带来比您将要解决的问题更多的问题。

您可以根据画布中渲染的内容检查图像数据，例如图像高度、宽度，甚至图像大小和颜色。例如，假设画布为250 x 250像素，它仅使用蓝色、红色和绿色渲染二维正方形。如果有三种以上的颜色，如果颜色不仅仅是蓝色、红色和绿色，或者如果画布不是250 x 250，则您拒绝它。您还可以检查用户代理中的“referer”值，不过这很容易更改

您可以检查图像数据，例如图像高度、宽度，甚至可能是图像大小和颜色，具体取决于画布中呈现的内容。例如，假设画布为250 x 250像素，它仅使用蓝色、红色和绿色渲染二维正方形。如果有三种以上的颜色，如果颜色不仅仅是蓝色、红色和绿色，或者如果画布不是250 x 250，则您拒绝它。您还可以检查用户代理中的“referer”值，不过这很容易更改

据我所知，如果你的应用程序是一个简单的绘图工具，那么一个简单的方法就是只发送包含所有用户手势的JSON，而不是保存图像本身

这样，即使一个人仍然可以绕过你的应用程序，生成你无法控制的图像（即编程），他们也无法在你的服务器上保存例如pr0n图像

这还允许您在保存数据结构服务器端之前对其进行健全性检查，并在应用程序中实现

cancel

功能

然而，一个相反的副作用是，要保存在大型图形上的数据会随之增加（但较小图形上的数据会减少）

const ctx=canvas.getContext（'2d'）；
设drawing=false，
rect=canvas.getBoundingClientRect（），
路径=[]；
让savedData='[]'；
保存\u btn.onclick=\u=>{
savedData=JSON.stringify（路径）；
console.clear（）；
console.log（savedData）；
//这里将此JSON数据发送到服务器
};
加载\u btn.onclick=\u=>{
//也很容易从服务器抓取
path=JSON.parse（savedData）；
draw（）；
};
函数绘图（）{
clearRect（0，0，canvas.width，canvas.height）；
//在每次抽签时，我们在所有路径上循环
路径。forEach（p=>{
ctx.lineWidth=p.strokeWidth；
ctx.strokeStyle=p.color；
ctx.beginPath（）；
常数l=p.list；
ctx.moveTo（l[0]，l[1]）；
对于（设i=2；i{
图纸=假；
};
canvas.onmousedown=e=>{
push（makePath（））；
绘图=真；
}
canvas.onmousemove=节流阀（e=>{
如果（！图纸）返回；
//最小化JSON数据的大小
//我们将坐标精确到（2）
设x=~（e.clientX-矩形左）*10）/10；
设y=~（e.clientY-rect.top）*10）/10；
路径[paths.length-1].list.push（x，y）；
draw（）；
});
window.onresize=window.onscroll=throttle（e=>rect=canvas.getBoundingClientRect（））；
功能节流阀（回调）{
让主动=假；
让evt；
常量处理程序=函数（）{
主动=假；
回调（evt）；
}
返回功能手柄通风口（e）{
evt=e；
如果（！活动）{
主动=真；
requestAnimationFrame（处理程序）；
};
};
}
函数randCol（）{
常量字母='0123456789ABCDEF'。拆分（''）；
让颜色='#'；
for（设i=0；i<6；i++）{
颜色+=字母[Math.round（Math.random（）*15）]；
}
返回颜色；
}

画布{
边框：1px实心；
}

保存
加载上次保存的

据我所知，如果你的应用程序是一个简单的绘图工具，那么一个简单的方法就是只发送一个包含所有用户手势的JSON，而不是保存图像本身

这样，即使一个人仍然可以绕过你的应用程序，生成你无法控制的图像（即编程），他们也无法在你的服务器上保存例如pr0n图像

这还允许您对数据str执行健全性检查