易于使用的反机器人

• 下载源代码 - 184.77 KB

引言

这只是一个提示，对于那些厌倦了与“字符串式” Anti-Bots 斗争，并且不希望他们的网页用户体验到相同感受的人。

背景

使用一种滑块控件来旋转图像（为了证明你是人类）的想法并不新鲜。 我在 2008 年从我的一个学生那里得到的，他是在网上某个地方找到的。

但是该实现基于 jQuery 或其他一些 JavaScript 库。 嗯，学习 jQuery 需要付出一些努力。 我不喜欢从黑盒子中提取的奇迹，所以我停止了考虑这个技巧。

现在，HTML5 为我们提供了新的可能性，我想我应该以控件的形式来实现这个想法。 稍后，我计划制作一个真正的 ASP.NET 自定义控件，其中嵌入 JavaScript。 到目前为止，代码是纯 HTML 和 JavaScript，但它可以完成工作。

Using the Code

解决方案中最困难的部分是

• 如何缩放任意图像并将其放置在画布的所需位置
• 如何以所需的角度旋转图像
• 如何跟踪这个角度值，并将其用作测试结果

以下片段解决了部分问题

 hdc.clearRect(0, 0, canvasWidth, canvasHeight);
 hdc.save();
 hdc.translate(cx, cy);
 hdc.rotate(-angle);
 hdc.translate(-cx, -cy);
 hdc.drawImage(img, posX, posY, img.width, img.height);
 hdc.restore();

hdc变量是canvas元素的设备上下文。 它是在全局范围内声明的，并在onload事件处理程序中创建，这是 HTML5 教程中推荐的。

var canvasImg = document.getElementById("canvasImg");
hdc = canvasImg.getContext("2d");

上下文操作的重要细节是

• 保存上下文的当前状态
• 在画布内的所需位置 (cx, cy) 转换（移动）上下文。
• 旋转很简单，但角度的符号应该是负数（如果你希望旋转方向与 Math 逆时针正方向规则一致）
• 将上下文转换回 (-cx, -cy)
• 在位置 (posX, posY) 绘制图像，必须事先正确计算
• 将上下文恢复到其初始状态

图像缩放和位置计算只进行一次（图像加载完成后）。 图像的左上角应该相对于画布的中心偏移。 此偏移的值必须是图像大小的一半。

 posX = cx - img.width / 2;
 posY = cy - img.height / 2;  

以下函数显示了缩放和定位计算的所有细节。 此函数被调用以响应图像onload事件 (img.onload = Scale;)。

function Scale()
{
  canvasWidth = canvasImg.width;
  canvasHeight = canvasImg.height;
            
  var 
    dx = img.width - canvasWidth,
    dy = img.height - canvasHeight;
         
  if (dx >= 0 || dy >= 0)
  {
    var d = 0.75 * (dx > dy ? canvasWidth / img.width : canvasHeight / img.height);
    img.width *= d;
    img.height *= d; 
  }
  cx = canvasWidth / 2;
  cy = canvasHeight / 2;
  posX = cx - img.width / 2;
  posY = cy - img.height / 2;
  factor = 2 * Math.abs(startAngle) / slider.offsetWidth;
  Draw();
} 

关注点

我不知道 HTML5 有一个具有滑块功能的控件，所以这里创建了一个手工制作的滑块。 如果你发现整个控件有用，那么也许值得用标准控件替换滑块。