获取照片的随机子部分

时间:2013-04-14 00:17:29

标签: php javascript jquery css

我正在开发一个Web应用程序,对于Web开发来说还是一个新手。

目前,我的程序会收到并询问与照片相关的用户输入。

为了完成我的项目,我需要做两件事之一:

  1. 在照片中选择一个随机方块,仅显示该部分。我希望每次重新加载页面时都会更改图像的这一部分以显示不同的部分。

  2. 检测面部特征,如眼睛或嘴巴,仅显示该部分图像。

  3. 任何免费库或实现这些功能的简单方法?

    谢谢!

1 个答案:

答案 0 :(得分:1)

对于第一个问题,它相对容易。您只需将图片网址设置为方形元素的背景图片,例如<div>,然后使用JS为{{x%y%随机生成1}} property:

background-position: x% y%

对于HTML部分,我们利用HTML $(document).ready(function() { // Generate random x-y coordinates var x = parseInt(100*Math.random(0,1)), y = parseInt(100*Math.random(0,1)); // Set background-image and position $('#img').css({ 'background-image':'url('+$('#img').data('img-src')+')', 'background-position':x+'% '+y+'%' }); }); 属性:

data-

CSS也非常直接:

<div id="img" data-img-src="/path/to/image"></div>

你可以在这里看到小提琴 - http://jsfiddle.net/teddyrised/gabxj/

第二个问题 - 你尝试了什么?我在Google和SO上进行了快速搜索 - Any library for face recognition in JavaScript?