如何在php中获取图像alt =“...”的值?

hi all i got many sets of data show below(in $code variable). i wonder how i can output all values of image alt="..." ? For example i want to get : Music Club ( sun ) Music 09

from:

        <img src="http://www.example.com/teststorage/episodes/11224/201.jpg" alt="Music Club ( sun ) Music 09" />

sample set of data:

    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 item">
        <div class="portfolio-item">
            <a href="http://www.example.com/en/test/1234/11224/Music 09" title="Music Club ( sun ) Music 09" class="portfolio-item-link" >
                <span class="portfolio-item-hover"></span>
                <span class="fullscreen"><i class="icon-play"></i></span>
                <img src="http://www.example.com/teststorage/episodes/11224/201.jpg" alt="Music Club ( sun ) Music 09" />
            </a>
            <div class="portfolio-item-title">
                <a href="http://www.example.com/en/test/1234/11224/Music 09" title="Music Club ( sun ) Music 09" class="portfolio-item-link"><h4>Music 09</h4></a>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>

展开翻译

译文

大家好我在下面显示了很多数据集(在$ code变量中)。 我想知道我怎么能输出图像的所有值alt =“...”? 例如,我想得到:音乐俱乐部(太阳)音乐09 </ strong> </ p>

来自:</ p>

 &lt;  img src =“http://www.example.com/teststorage/episodes/11224/201.jpg”alt =“音乐俱乐部(太阳)音乐09”/&gt; 
</ code> </ pre>

样本数据集:</ p>

 &lt; div class =“col-lg-3 col-md-3 col-sm-6 col-xs-12  item“&gt; 
&lt; div class =”portfolio-item“&gt;
&lt; a href =”http://www.example.com/en/test/1234/11224/Music 09“title =” 音乐俱乐部(太阳)音乐09“class =”portfolio-item-link“&gt;
&lt; span class =”portfolio-item-hover“&gt;&lt; / span&gt;
&lt; span class =”fullscreen“ &gt;&lt; i class =“icon-play”&gt;&lt; / i&gt;&lt; / span&gt;
&lt; img src =“http://www.example.com/teststorage/episodes/11224/201。 jpg“alt =”音乐俱乐部(太阳)音乐09“/&gt;
&lt; / a&gt;
&lt; div class =”portfolio-item-title“&gt;
&lt; a href =”http:/ /www.example.com/en/test/1234/11224/Music 09“ title =“Music Club(sun)Music 09”class =“portfolio-item-link”&gt;&lt; h4&gt; Music 09&lt; / h4&gt;&lt; / a&gt;
&lt; / div&gt;
&lt; div class =“clearfix”&gt;&lt; / div&gt;
&lt; / div&gt;
&lt; / div&gt;
</ code> </ pre>
</ div>

dousigan0499
dousigan0499 你没有。你不用正则表达式处理html。你使用DOM和xpath,例如//IMG/@ALT
接近 6 年之前 回复

3个回答

If you realy want to use preg_match_all you could use the following code.

<?php
$str = <<<END
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 item">
        <div class="portfolio-item">
            <a href="http://www.example.com/en/test/1234/11224/Music 09" title="Music Club ( sun ) Music 09" class="portfolio-item-link" >
                <span class="portfolio-item-hover"></span>
                <span class="fullscreen"><i class="icon-play"></i></span>
                <img src="http://www.example.com/teststorage/episodes/11224/201.jpg" alt="Music Club ( sun ) Music 09" />
            </a>
            <div class="portfolio-item-title">
                <a href="http://www.example.com/en/test/1234/11224/Music 09" title="Music Club ( sun ) Music 09" class="portfolio-item-link"><h4>Music 09</h4></a>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
END;

preg_match_all('/<img(.*?)alt=\"(.*?)\"(.*?)>/si', $str, $out, PREG_SET_ORDER);

//see first output
var_dump($out);

/*
array(1) {
  [0]=>
  array(4) {
    [0]=>
    string(105) "<img src="http://www.example.com/teststorage/episodes/11224/201.jpg" alt="Music Club ( sun ) Music 09" />"
    [1]=>
    string(65) " src="http://www.example.com/teststorage/episodes/11224/201.jpg" "
    [2]=>
    string(27) "Music Club ( sun ) Music 09"
    [3]=>
    string(2) " /"
  }
}
*/

//clean array
$alt = array();

foreach($out as $val) {
  $alt[] =  $val[2];
}

//see cleaned output
var_dump($alt);
/*
array(1) {
  [0]=>
  string(27) "Music Club ( sun ) Music 09"
}
*/
?>

If you want to do the right thing however, I would look into simple_html_dom. You can do something like:

<?php
// Create DOM from URL or file
$html = file_get_html('http://www.example.com/page_i_want_to_spider.php');

// Find all images
foreach($html->find('img') as $element)
       echo $element->alt . '<br>';
?>
duanguanya3052
duanguanya3052 在我填充所有[]的foreach中,你也可以使用$ val [2]的回声来显示它
接近 6 年之前 回复
dpjo15650
dpjo15650 真的,听听所有的建议,不要使用它! 只需检查simple_html_dom或casimire et hippolyte的答案。
接近 6 年之前 回复
duanjue9889
duanjue9889 hugo desing很多谢谢你的preg匹配所有工作,但如何使用var_dump($ out)数组值作为超链接标题?> <a href="./test.php?id=/&<?php echo $alt; ?> “> <?php echo $ alt; ?> </a> <br /> <?
接近 6 年之前 回复

if you have html code like below then you can do it like this

$re = '/(alt)=("[^"]*")/'; 
$str = '<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 item">
        <div class="portfolio-item">
            <a href="http://www.example.com/en/test/1234/11224/Music 09" title="Music Club ( sun ) Music 09" class="portfolio-item-link" >
                <span class="portfolio-item-hover"></span>
                <span class="fullscreen"><i class="icon-play"></i></span>
                <img src="http://www.example.com/teststorage/episodes/11224/201.jpg" alt="Music Club ( sun ) Music 09" />
            </a>
            <div class="portfolio-item-title">
                <a href="http://www.example.com/en/test/1234/11224/Music 09" title="Music Club ( sun ) Music 09" class="portfolio-item-link"><h4>Music 09</h4></a>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>'; 

preg_match_all($re, $str, $matches);

output:

    [0] => Array
        (
            [0] => alt="Music Club ( sun ) Music 09"
        )

    [1] => Array
        (
            [0] => alt
        )

    [2] => Array
        (
            [0] => "Music Club ( sun ) Music 09"
        )

展开翻译

译文



如果你有像下面这样的html代码那么你就可以这样做</ p>

   $ re ='/(alt)=(“[^”] *“)/'; 
$ str ='&lt; div class =”col-lg-3 col-md-3 col-sm-6 col- xs-12 item“&gt;
&lt; div class =”portfolio-item“&gt;
&lt; a href =”http://www.example.com/en/test/1234/11224/Music 09“ title =“Music Club(sun)Music 09”class =“portfolio-item-link”&gt;
&lt; span class =“portfolio-item-hover”&gt;&lt; / span&gt;
&lt; span class = “fullscreen”&gt;&lt; i class =“icon-play”&gt;&lt; / i&gt;&lt; / span&gt;
&lt; img src =“http://www.example.com/teststorage/episodes/11224 /201.jpg“alt =”音乐俱乐部(太阳)音乐09“/&gt;
&lt; / a&gt;
&lt; div class =”portfolio-item-title“&gt;
&lt; a href =” http://www.example.com/en/test/1234/11224/Music 09“title =”音乐俱乐部(太阳)音乐09“class =”portfolio-item-link“&gt;&lt; h4&gt; Music 09&lt; / h4&gt;&lt; / a&gt;
&lt; / d iv&gt;
&lt; div class =“clearfix”&gt;&lt; / div&gt;
&lt; / div&gt;
&lt; / div&gt;';

^ npreg_match_all($ re,$ str,$ matches);
</ code> </ pre>

输出:</ p>

  [0  ] =&gt; 数组

[0] =&gt; alt =“音乐俱乐部(太阳)音乐09”

[1] =&gt; 数组

[0] =&gt; alt

[2] =&gt; 数组

[0] =&gt;“音乐俱乐部(太阳)音乐09”

</ code> </ pre>
</ div>

douan1893
douan1893 我已经删除了g修饰符,并且还看到了3v4l.org/Fad06
接近 6 年之前 回复
doubu1950
doubu1950 我正在使用超链接标题的alt值。 我创建超链接并使用超链接标题中的alt值
接近 6 年之前 回复
duanliao2310
duanliao2310 你打算用什么alt文本?
接近 6 年之前 回复
douwan4993
douwan4993 我确实使用了print_r($ matches)但没有输出!
接近 6 年之前 回复
duangong937906
duangong937906 打印你需要做print_r($ matches); 到底
接近 6 年之前 回复
dongwolu5275
dongwolu5275 谢谢你的答复。 我试过你的解决方案没有打印出来! 输入数据不在一行中作为示例,它在块中,如我的第一篇文章中所示。 你能告诉我怎么修理它吗?
接近 6 年之前 回复

With DOMDocument:

$dom = new DOMDocument();
@$dom->loadHTML($html);

$imgs= $dom->getElementsByTagName('img');

foreach ($imgs as $img) {
    if ($img->hasAttribute('alt')) echo $img->getAttribute('alt') . '<br/>';
}

展开翻译

译文



使用DOMDocument:</ p>

  $ dom = new DOMDocument(); 
@ $ dom-&gt; loadHTML($ html);

$ imgs = $ dom-&gt; getElementsByTagName('img');

foreach($ imgs as $ img){
if($ img-&gt ; hasAttribute('alt'))echo $ img-&gt; getAttribute('alt')。 '&lt; br /&gt;';
}
</ code> </ pre>
</ div>

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
macos远程windows桌面 无法使用alt键并且无法输入中文?
MacBook通过Microsoft Remote Desktop 10 for MacOS连接远程windows系统. 在win系统能无法输入中文,尝试过个更换输入法重启服务重启系统均无效. 在使用alt+/(eclipse中的快捷键)时,会输入÷符号. 换个MacBook或者window笔记本都没有问题
Ubuntu中在字符页面正常的应该是按Ctrl+Alt+F7转换不到图像页面怎么办?
Ubuntu中在字符页面正常的应该是按Ctrl+Alt+F7转换到图像页面的,可是不知道为啥我的电脑按那个没有反应,老师说是因为电脑键盘的问题,F7上我的是飞行模式。。。。那请问该怎么办呀?
关于html中img标签的alt属性
萌新请教各界大佬,这个img标签里的alt属性不是表示图像的提示信息吗,但为什么以下代码完成后鼠标移到浏览器中图像上无法显示alt中的信息,而必须再加上title才行 无法显示:<body> <div align="center"> <img src="链接标记图片.gif" border="2" width="120" height="120" alt="激情与理性的边缘"/> </div> </body> 正确:<body> <div align="center"> <img src="链接标记图片.gif" border="2" width="120" height="120" alt="激情与理性的边缘" title="激情与理性的边缘" /> </div> </body>
关于idea中alt+insert快捷键遇到的问题
今天遇到一个很神奇的问题,在用idea写代码的时候(用的外接键盘),alt+insert不能用了,使用后的效果和只按insert一样(光标变成方块儿) 我去看了快捷键设置,发现并没有改动,然后试了一下用笔记本自带的键盘,发现alt+insert没有问题。这里我估计是键盘的ins键失效了。但是无意中一次尝试按了win+ins,结果发现正是想要的alt+ins的效果。 这把键盘以前也用过,没有这个问题,请问一下这是键盘哪里出问题了?
vb.net 点窗体上的button,来执行键盘的键 Alt+a
如题,在vb.net上要怎么实现这个效果呢? vb.net 点窗体上的button,来执行键盘的键 Alt+a
Python BeautifulSoup获取属性值怎么?
代码如下: html=''' <img src = "//s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:5788b470/image/loading_2.e3d934bf.png"alt = "hah"class ="poster-default"/> <img data-src = "https://p1.meituan.net/movie/20803f59291c47e1e116c11963ce019e68711.jpg@160w_220h_1e_1c"alt = "abc" class ="board-img"/>''' from bs4 import BeautifulSoup soup=BeautifulSoup(html,"lxml") print(soup.prettify()) print(soup.findAll(attrs='data-src')) ``` 输出的list为空 [] ``` 我想用beautifulsoup 来获取data-src这个属性的值,也就是这个 "https://p1.meituan.net/movie/20803f59291c47e1e116c11963ce019e68711.jpg@160w_220h_1e_1c" 各位大神,**如果 不用 beautifulsoup 的 CSS 选择器**,怎么获取?
在C++中使用shellapi.h报错,在线等!
# 求大神指点:在C++中使用shellapi.h报错 这个是在Dev-c++里面运行的一个头文件,是我比较喜欢用的,但是今天用着的时候突然就给我跳转到头文件的编译区,一下子把我整懵啦!我的这个头文件是C++库中的一个头文件:shellapi.h 还是先来说一下这个头文件吧:这个头文件我只要是用来配合着不用cmd打开网页,但是今天遇到这个问题的时候我又试了一下cmd,发现:**cmd竟然没有报错!** 但是在我试shellapi.h的时候**报错了!**,所以我需要得到各位大佬们的帮助,我会把我的错误的一小段截取的代码写在下面,~~但我也希望能够通过我这次的经历,来帮助大家不要再自己的程序里面犯我的这种错误~~ ,但是话说回来,我还是需要大佬的~~援助~~ (好像因该是“帮助”)这个就是我错误代码那一行的截图:→![Alt](https://img-blog.csdnimg.cn/20200314182209860.png#pic_center =600x60) 再来看一下我截取的一段代码吧: ```cpp const TCHAR szOperation[] = _T("open"); const TCHAR szURL[] = _T("https://www.baidu.con/");//这里我就用百度举个例吧 int WINAPI WinMain(HINSTANCE hInst, HINSTANCE, LPSTR lpCmd, int nShow); { HINSTANCE hRslt = ShellExecute(NULL, szOperation,szURL, NULL, NULL, SW_SHOWNORMAL); assert(hRslt > (HINSTANCE)HINSTANCE_ERROR); } ``` 在这段代码之前我用的头文件也给大佬看一下吧: ```cpp #include <tchar.h> #include <assert.h> #include <shellapi.h> #include <iostream> #include <stdio.h> #include <unistd.h> #include <windows.h> ``` 最后报错的是头文件的不知道什么东西,就~~莫名其妙的~~ 弹出来了 ![在这里插入图片描述](https://img-blog.csdnimg.cn/202003141843435.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R4ZmpkdnNpamRmaGl2,size_16,color_FFFFFF,t_70#pic_center =500x) 报错的代码就是:(如下) ```cpp DECLARE_HANDLE (HDROP); ``` emm...这个是头文件<shellapi.h>里面报错的,还请各位大佬解读一下,我在线等!
使用jq的ajax 后台php在谷歌无法获取ajax传来的post值(谷歌显示未定义) 在火狐可以获取到
# 我搞了几天 依旧无法在谷歌获取ajax传来的值,时不时有这个报错 ![图片说明](https://img-ask.csdn.net/upload/201904/12/1555070062_904000.png) # js部分 ``` var name2=$("#name2").val(); var textarea=$("#textarea_liuyan").val(); $.ajax({ //请求方式 type:'POST', //发送请求的地址 url:'http://192.168.0.100:85/php/liuyan.php', //服务器返回的数据类型 contentType:"application/x-www-form-urlencoded", data:{ "name":name2, "tel":textarea }, success:function(data){ alert(name2); console.log(data); console.log(typeof data); console.log(XMLHttpRequest.readyState); }, error:function(data){ alert("down"); console.log (data); console.log (typeof textarea); } }); ``` # php部分 ``` <?php header('Access-Control-Allow-Origin:*'); define('DB_HOST', 'localhost'); define('DB_USER', 'root'); define('DB_PASS', '1234'); define('DB_NAME', 'dengluzhuce'); $dbc = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME); echo ($_POST['name']); ?> ``` # html部分 ``` <section class="liuyan" > <div class="wrap"> <div class="wrap-head"> <div class="head-logo"> <img src="image/019.png" /> </div> <div class="head-txt"> <a class="title-txt" href="javascript:void(0)">置办年货省省省!红包在手年货无忧!点击领取年货红包&nbsp;&nbsp;&nbsp;热门微博</a> </div> </div> <div class="main-txt"> <textarea id="textarea_liuyan" class="textarea_liuyan" name="textarea_liuyan5" rows="" cols="" ></textarea> </div> <div class="warp-footer"> <div class="warp-icon-cont"> <ul> <li><img src="img/wb1.png" alt="" /> <a href="javascript:void(0)">表情</a> </li> <li><img src="img/wb2.png" alt="" /> <a href="javascript:void(0)">图片</a> </li> <li><img src="img/wb3.png" alt="" /> <a href="javascript:void(0)">视频</a> </li> <li><img src="img/wb4.png" alt="" /> <a href="javascript:void(0)">话题</a> </li> <li><img src="img/wb5.png" alt="" /> <a href="javascript:void(0)">文章</a> </li> <p style="float:right">姓名<input type="text" id="name2" name="name2"></input></p> </ul> </div> <div class="warp-footer-btns"> <div class="release-btn"> <a href="javascript:void(0)"> 发布 </a> </div> </div> </div> </div> <!-- 显示留言的主体 --> <div class="show"> <!-- <div class="show-content"> <div class="show-name">Xx</div> <div class="show-txt"> <p class="">这是内容</p> </div> <div class="show-time">2018年10月24日</div> <div class="show-close">x</div> </div> --> </div> </section> ```
调用摄像头,然后将人脸标出结果报错,c++,哪位大佬指点下啊
``` void faceTest() { String facefile = "F:\\work\\opencv\\build\\etc\\haarcascades\\haarcascade_frontalface_alt.xml"; //脸部识别分类器 CascadeClassifier faceCascader; if (!faceCascader.load(facefile)) { printf("无法加载脸部特征文件:%s", facefile); return; } namedWindow("摄像头", CV_WINDOW_AUTOSIZE); VideoCapture capture(0);//打开摄像头 Mat frame; Mat gray; vector<Rect> faces; int sn = 0; //实时读取摄像头的图像帧 while (capture.read(frame)) { //图像变灰 cvtColor(frame, gray, COLOR_RGB2GRAY); equalizeHist(gray, gray); faceCascader.detectMultiScale(gray, faces, 1.2, 3, 0, Size(30, 30)); for (size_t faceSize = 0; faceSize < faces.size(); faceSize++) { Rect roi; roi.x = faces[static_cast<int>(faceSize)].x; roi.y = faces[static_cast<int>(faceSize)].y; roi.width = faces[static_cast<int>(faceSize)].width; roi.height = faces[static_cast<int>(faceSize)].height; Mat faceROI = frame(roi); //在人脸区域画一个矩形 rectangle(frame, faces[static_cast<int>(faceSize)], Scalar(0, 0, 255), 2, 8, 0); sn++; //将sn整型值转为字符串 stringstream stream; stream << sn; //生产一个新的文件名 String snStr = "F:\\mm\\1\\img-" + stream.str() + ".jpg"; cout << snStr << endl; imwrite(snStr, faceROI); } imshow("摄像头", frame); char key = waitKey(30); //按ESC键退出 if (key == 27) { break; } } } int main() { faceTest(); waitKey(0); return 0; } ``` 在faceCascader.detectMultiScale(gray, faces, 1.2, 3, 0, Size(30, 30));这一句会报错0x00007FF9E591BFF2 (opencv_world341d.dll)处(位于 getphoto.exe 中)引发的异常: 0xC0000005: 读取位置 0x000002C90C45F000 时发生访问冲突。,哪位指点下a
ExtJs CheckBox 怎样从store中获取值在显示到CheckBox中
{ fieldLabel: '城区', name: 'Region', xtype: 'checkbox', itemCls: 'x-check-group-alt', columns: 3, store: Ext.create('TianZun.store.RegionStore'), displayField: 'Name', valueField: 'ID', listeners: { render: function () { var store = Ext.create('TianZun.store.RegionStore'); for (var i = 0; i < store.count; i++) { var list = store.getAt(i); var id = list.ID; } } } }
Js 获取图像热点,热点为链接?
<img src="/Storage/master/gallery/201509/20150916181545_5782.png" alt="" /" width="500" height="500" usemap="#Map" border="0" /> <map name="Map" id="Map"> <area shape="rect" coords="73,100,328,149" href="http://www.youliangku.com/product_detail-103.aspx" target="_blank" alt="" /> <area shape="rect" coords="72,156,300,199" href="http://www.youliangku.com/product_detail-105.aspx" target="_blank" alt="" /> </map>![图片说明](https://img-ask.csdn.net/upload/201509/16/1442402091_372413.png) 原本用DW切片技术在图片里添加热点,可是网站限制了对map标签的使用,请问大神还有其他的办法吗?Js也可以,跪求代码 ``` ```
【小白求助】安卓opencv用分类器对人脸进行识别的一些问题
小白入门,最近在看opencv的人脸识别(分类) 然后按照网上的代码,学习了之后,自己写了一段,发现运行的时候会卡很久,甚至直接退出,并且越用越卡。 我想实现的是对一张图片进行读入,然后加载多个分类器对图片内容进行识别,从而达到分类的目的。 我那个问题困扰了我一天,想来求助大神 我加载人脸识别的模型没问题,但是同时加载两个模型,比如说人脸和上身,就会卡死。 代码分3个部分,分别是MainActivity.java , execDetect.java , Detector.java 以下是MainActivity.java ``` package com.RinGo.IMGfenlei; import android.content.Context; import android.content.Intent; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.net.Uri; import android.os.Bundle; import android.os.Environment; import android.provider.MediaStore; import android.util.Log; import android.view.View; import android.widget.Button; import android.widget.ImageButton; import android.widget.TextView; import android.widget.Toast; import androidx.appcompat.app.AppCompatActivity; import org.opencv.android.Utils; import org.opencv.core.Mat; import org.opencv.core.MatOfRect; import org.opencv.core.Rect; import org.opencv.core.Scalar; import org.opencv.imgproc.Imgproc; import org.opencv.objdetect.CascadeClassifier; public class MainActivity extends AppCompatActivity { private Detector frontfaceDetector; private Detector smileDetector; private static String CAMERAIMAGENAME = "image.jpg"; private ImageButton imageButton; private ImageButton imageButton2; private TextView textView; private Bitmap bitmap; private Bitmap rectBitmap; private Bitmap resizeBitmap; private Toast toast; private Button addFile; private Button startDetect; private Button check; private execDetect toDetcet; private String show; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); textView = (TextView) findViewById(R.id.tv_face); // imageButton = (ImageButton) findViewById(R.id.iv_face); //imageButton.setGravity(Gravity.CENTER_HORIZONTAL | Gravity.CENTER_VERTICAL); // imageButton2 = (ImageButton) findViewById(R.id.iv_face2); // imageButton2.setGravity(Gravity.CENTER_HORIZONTAL | Gravity.CENTER_VERTICAL); toDetcet=new execDetect(); addFile=(Button)findViewById(R.id.addPic); startDetect=(Button)findViewById(R.id.startDetect); check=(Button)findViewById(R.id.check); startDetect.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // startDetect.setClickable(false); textView.setText("正在检测"); // detect(); Thread d =new Thread(new Runnable() { @Override public void run() { toDetcet.initExecDetect(MainActivity.this,bitmap); // Toast.makeText(MainActivity.this, "initialize succeed", Toast.LENGTH_SHORT).show(); show= toDetcet.startDetect(); // Toast.makeText(MainActivity.this, " succeed", Toast.LENGTH_SHORT).show(); } }); d.run(); textView.setText(show); // startDetect.setClickable(true); } }); check.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // startDetect.setClickable(false); textView.setText(toDetcet.getReturntoMain()); // startDetect.setClickable(true); } }); addFile.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // 添加照片 // 打开本地相册 Intent intent1 = new Intent(Intent.ACTION_PICK, android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI); startActivityForResult(intent1, 101); //startActivity(intent1); } }); String strLibraryName = "opencv_java3"; // 不需要添加前缀 libopencv_java3 { try { Log.e("loadLibrary", strLibraryName); System.loadLibrary(strLibraryName); //System.loadLibrary(Core.NATIVE_LIBRARY_NAME); // couldn't find "libopencv_java320.so" } catch (UnsatisfiedLinkError e) { Log.e("loadLibrary", "Native code library failed to load.\n" + e); } catch (Exception e) { Log.e("loadLibrary", "Exception: " + e); } } // frontfaceDetector = new Detector(this, R.raw.haarcascade_frontalface_alt, 6, 0.2F, 0.2F, new Scalar(255, 0, 0, 255)); } /** * 点击添加照片事件 * * @param v */ public void onClick(View v) { int bt_id = v.getId(); switch (bt_id) { /* case R.id.takePhoto: // 拍照 // 打开本地相机 Intent intent2 = new Intent(android.provider.MediaStore.ACTION_IMAGE_CAPTURE); Uri imageUri = Uri.fromFile(new File(Environment.getExternalStorageDirectory(), CAMERAIMAGENAME)); intent2.putExtra(MediaStore.EXTRA_OUTPUT, imageUri); startActivityForResult(intent2, 102); break; */ case R.id.back: this.finish(); break; default: break; } } @Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { super.onActivityResult(requestCode, resultCode, data); // 加判断 不选择照片或者不拍照时不闪退 //Log.e("data", String.valueOf(data)); //if (data == null) //return; bitmap = null; switch (requestCode) { // 选择图片库的图片 case 101: if (resultCode == RESULT_OK) { try { Uri uri = data.getData(); bitmap = MediaStore.Images.Media.getBitmap(this.getContentResolver(), uri); } catch (Exception e) { e.printStackTrace(); } } break; // 表示调用本地照相机拍照 case 102: if (resultCode == RESULT_OK) { //Bundle bundle = data.getExtras(); //bm = (Bitmap) bundle.get("data"); bitmap = BitmapFactory.decodeFile(Environment.getExternalStorageDirectory() + "/" + CAMERAIMAGENAME); } break; default: break; } Log.e("bitmap", String.valueOf(bitmap)); if (bitmap == null) { toast = Toast.makeText(MainActivity.this, "未选择图像", Toast.LENGTH_SHORT); toast.show(); return; } // 识别图片 并画框 /* Thread detect=new Thread(new Runnable() { @Override public void run() { } }); detect.run(); */ // 将照片剪裁 bitmap将被释放重新赋值 //int ibWidth = imageButton.getWidth(); // int ibHeight = imageButton.getHeight(); //resizeBitmap = imageButton.resizeBitmap(bitmap, ibWidth, ibHeight); //imageButton.setBitmap(resizeBitmap); //imageButton2.setBitmap(rectBitmap); } private void detect() { MainActivity.this.runOnUiThread(new Runnable() { @Override public void run() { toDetcet.initExecDetect(MainActivity.this,bitmap); // Toast.makeText(MainActivity.this, "initialize succeed", Toast.LENGTH_SHORT).show(); String show= toDetcet.startDetect(); // Toast.makeText(MainActivity.this, " succeed", Toast.LENGTH_SHORT).show(); textView.setText(show); } }); //textView.setText(toDetcet.getReturntoMain()); } } ``` 以下是activity_main.xml ``` <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:id="@+id/tv_face" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="16dp" android:text="未检测到人脸" android:textColor="@color/colorAccent" app:layout_constraintBottom_toTopOf="@+id/ll1" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" /> <LinearLayout android:id="@+id/ll1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent"> <com.qmuiteam.qmui.widget.roundwidget.QMUIRoundButton android:id="@+id/addPic" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="5dp" android:layout_weight="1" android:onClick="onClick" android:text=" 选择图片(CV) " android:textSize="16sp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" /> <com.qmuiteam.qmui.widget.roundwidget.QMUIRoundButton android:id="@+id/startDetect" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="5dp" android:layout_weight="1" android:onClick="onClick" android:text=" 开始识别 " android:textSize="16sp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" /> <com.qmuiteam.qmui.widget.roundwidget.QMUIRoundButton android:id="@+id/check" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="5dp" android:layout_weight="1" android:onClick="onClick" android:text=" 结果 " android:textSize="16sp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" /> <com.qmuiteam.qmui.widget.roundwidget.QMUIRoundButton android:id="@+id/back" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="0dp" android:layout_weight="1" android:onClick="onClick" android:text=" 返回 " android:textSize="16sp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" /> </LinearLayout> </LinearLayout> ``` 以下是execDetect.java ``` package com.RinGo.IMGfenlei; import android.content.Context; import android.graphics.Bitmap; import android.util.Log; import org.opencv.android.Utils; import org.opencv.core.Mat; import org.opencv.core.MatOfRect; import org.opencv.core.Rect; import org.opencv.core.Scalar; import org.opencv.imgproc.Imgproc; import org.opencv.objdetect.CascadeClassifier; import com.RinGo.IMGfenlei.R; import com.RinGo.IMGfenlei.Detector; import java.io.File; import java.io.FileOutputStream; import java.io.InputStream; public class execDetect { private Detector frontfaceDetector; private Detector smilefaceDetector; private Detector[] detectors=new Detector[10]; private Detector detector; private Bitmap bitmap; private Bitmap rectBitmap; private String returntoMain=""; private String[] detectorNames=new String[10]; private CascadeClassifier mFrontalFaceClassifier = null; //正脸 级联分类器 private CascadeClassifier mProfileFaceClassifier = null; //侧脸 级联分类器 private int smilefacenum=0; private Context mcontext; private int[] cascades=new int[10]; public void initExecDetect(Context _context,Bitmap _bitmap) { bitmap=_bitmap; mcontext=_context; cascades[0]=R.raw.haarcascade_frontalface_alt; detectors[0] = new Detector(_context,R.raw.haarcascade_frontalface_alt, 1, 0.2F, 0.2F, new Scalar(255, 0, 0, 255)); detectorNames[0]="正面人脸"; cascades[1]=R.raw.lbpcascade_frontalface; detectors[1] = new Detector(_context,R.raw.lbpcascade_frontalface, 1, 0.2F, 0.2F, new Scalar(255, 0, 0, 255)); detectorNames[1]="正面人脸2"; } public String startDetect() { // bitmapToMat Mat toMat = new Mat(); Utils.bitmapToMat(bitmap, toMat); // Mat copyMat = new Mat(); // toMat.copyTo(copyMat); // 复制 // togray Mat gray = new Mat(); MatOfRect mRect = new MatOfRect(); Imgproc.cvtColor(toMat, gray, Imgproc.COLOR_RGBA2GRAY); for (int id = 0; id < detectors.length; id++) { //detector = new Detector(mcontext,cascades[id], 3, 0.1F, 0.1F, new Scalar(255, 0, 0, 255)); try { int num = 0; mRect=new MatOfRect(); Rect[] object = detectors[id].detectObjectImage( gray, mRect); Log.e("objectLength", object.length + ""); num=object.length; /* for (Rect rect : object) { num++; } */ returntoMain =returntoMain+ String.format("检测到%1$d个" + detectorNames[id], num) + "\n"; } catch (Exception e) { e.printStackTrace(); } //textView.setText(String.format("检测到%1$d个人脸", facenum)); //Utils.matToBitmap(toMat, bitmap); } return returntoMain; } public String getReturntoMain() { return returntoMain; } } ``` 以下是Detector.java,定义了我的级联分类器的设置 ``` package com.RinGo.IMGfenlei; import android.content.Context; import org.opencv.core.Mat; import org.opencv.core.MatOfRect; import org.opencv.core.Rect; import org.opencv.core.Scalar; import org.opencv.core.Size; import org.opencv.objdetect.CascadeClassifier; import org.opencv.objdetect.Objdetect; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; /** * Created by think-hxr on 17-10-12. */ public class Detector { private CascadeClassifier mCascadeClassifier; private int mMinNeighbors; private float mRelativeObjectWidth; private float mRelativeObjectHeight; private Scalar mRectColor; /** * 构造方法 * * @param context 上下文 * @param id 级联分类器ID * @param minNeighbors 连续几帧确认目标 * @param relativeObjectWidth 最小宽度屏占比 * @param relativeObjectHeight 最小高度屏占比 * @param rectColor 画笔颜色 */ public Detector(Context context, int id, int minNeighbors, float relativeObjectWidth, float relativeObjectHeight, Scalar rectColor) { context = context.getApplicationContext(); mCascadeClassifier = createDetector(context, id); mMinNeighbors = minNeighbors; mRelativeObjectWidth = relativeObjectWidth; mRelativeObjectHeight = relativeObjectHeight; mRectColor = rectColor; } /** * 创建检测器 * * @param context 上下文 * @param id 级联分类器ID * @return 检测器 */ private CascadeClassifier createDetector(Context context, int id) { CascadeClassifier javaDetector; InputStream is = null; FileOutputStream os = null; try { is = context.getResources().openRawResource(id); File cascadeDir = context.getDir("cascade", Context.MODE_PRIVATE); File cascadeFile = new File(cascadeDir, id + ".xml"); os = new FileOutputStream(cascadeFile); byte[] buffer = new byte[4096]; int bytesRead; while ((bytesRead = is.read(buffer)) != -1) { os.write(buffer, 0, bytesRead); } javaDetector = new CascadeClassifier(cascadeFile.getAbsolutePath()); //javaDetector=new CascadeClassifier(); // javaDetector.load(cascadeFile.getAbsolutePath()); if (javaDetector.empty()) { javaDetector = null; } boolean delete = cascadeDir.delete(); return javaDetector; } catch (IOException e) { e.printStackTrace(); return null; } finally { try { if (null != is) { is.close(); } if (null != os) { os.close(); } } catch (IOException e) { e.printStackTrace(); } } } /** * 目标检测 视频 * * @param gray 灰度图像 * @param object 识别结果的容器 * @return 检测到的目标位置集合 */ public Rect[] detectObject(Mat gray, MatOfRect object) { // 使用Java人脸检测 mCascadeClassifier.detectMultiScale( gray, // 要检查的灰度图像 object, // 检测到的人脸 1.1, // 表示在前后两次相继的扫描中,搜索窗口的比例系数。默认为1.1即每次搜索窗口依次扩大10%; mMinNeighbors, // 默认是3 控制误检测,表示默认几次重叠检测到人脸,才认为人脸存在 Objdetect.CASCADE_SCALE_IMAGE, getSize(gray, mRelativeObjectWidth, mRelativeObjectHeight), // 目标最小可能的大小 gray.size()); // 目标最大可能的大小 return object.toArray(); } /** * 目标检测 图片 * * @param gray 灰度图像 * @param object 识别结果的容器 * @return */ public Rect[] detectObjectImage(Mat gray, MatOfRect object) { mCascadeClassifier.detectMultiScale(gray,object); return object.toArray(); } /** * 根据屏占比获取大小 * * @param gray gray * @param relativeObjectWidth 最小宽度屏占比 * @param relativeObjectHeight 最小高度屏占比 * @return 大小 */ private Size getSize(Mat gray, float relativeObjectWidth, float relativeObjectHeight) { Size size = gray.size(); int cameraWidth = gray.cols(); int cameraHeight = gray.rows(); int width = Math.round(cameraWidth * relativeObjectWidth); int height = Math.round(cameraHeight * relativeObjectHeight); size.width = 0 >= width ? 0 : (cameraWidth < width ? cameraWidth : width); // width [0, cameraWidth] size.height = 0 >= height ? 0 : (cameraHeight < height ? cameraHeight : height); // height [0, cameraHeight] return size; } /** * 获取画笔颜色 * * @return 颜色 */ public Scalar getRectColor() { return mRectColor; } } ```
style.top 在变为什么 对应元素位置可以不变?
``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <title>Document</title> <!-- <script src="./demo/jquery.min.js"></script> --> </head> <style lang=""> *{ margin: 0; padding: 0; } body{ /*height: 1000px;*/ /*position: relative;*/ /*margin:0px; padding:0px;*/ } .point { position: absolute; border: 5px solid red; } .ball{ width:4px; height:4px; /*background: #d9fe37;*/ background: red; border-radius: 50%; position: absolute; } #sketchPad{ /*width: 400px; height: 400px;*/ /*left: 100px; top: 100px;*/ /*background-color: #ff0; overflow: auto;*/ /*position: relative;*/ } .small{ position: relative; height: 300px; overflow: auto; } .small img{ height: 300px; } #selectImage{ left: 200px; top: 500px; position: absolute; } .box{ width: 300px; height: 300px; margin: 100px; border: 1px solid #ccc; position: relative; /*overflow: auto;*/ } .big{ width: 600px; height: 600px; position: absolute; top: 0; left: 560px; border: 1px solid #ccc; overflow: auto; /*display: none;*/ display: block; background-color: #eee; } .big::-webkit-scrollbar{ display: none; } .mask{ width: 50px; height: 50px; background: rgba(255,255,0,0.4); position: absolute; top: 0; left: 0; /*鼠标的样式*/ cursor: crosshair; display: none; } .big img{ position: absolute; height: 3600px; /*box.height*big.width/mask.width */ top: 0; left: 0; } .aim{ position: absolute; top: 50%; left: 50%; width: 20px; margin-left: -10px; height: 20px; margin-top: -10px; display: block; /*z-index: 8*/ } .aim__ver{ position: absolute; top: 50%; left: 50%; width: 2px; height: 40px; margin-top: -20px; margin-left: -1px; background-color: #f00; } .aim__hor{ position: absolute; top: 50%; left: 50%; width: 40px; height: 2px; margin-top: -1px; margin-left: -20px; background-color: #f00; } </style> <body> <div class="box" id="fdj"> <div id="sketchPad" class="small"> <img id='imageID' name='imageID' src=" " alt=""> <div class="mask"></div> </div> <div class="big"> <img id='imageIDBig' name='imageID' src=" "/> <div class="aim"> <div class="aim__ver"></div> <div class="aim__hor"></div> </div> </div> </div> <div id="selectImage"> <form name="form" id="form" method="post" enctype="multipart/form-data" style="display: block;padding:2px;overflow: hidden;" > <input type="file" name="upload" id="upload" style="display: none;" onchange="document.form.path.value=this.value;selectImage(this)" multiple="multiple" accept=".PNG,.JPG,.GIF,.BMP" /> <input name="path" id="path" readonly style="display: block;float:left;margin-left:120px;height:24px"> <input type="button" value="请点击上传需要进行测量的图片" onclick="document.form.upload.click();" style="display: block;float:left;margin-left:10px;height:30px"> </form> </div> <button id="myBtn">创建连线</button> </body> <script> document.getElementById("myBtn").onclick = function(event) { document.getElementById("sketchPad").style.cursor="crosshair"; document.getElementById("sketchPad").addEventListener("click", createLine, false); event.stopPropagation(); // 阻止冒泡 }; // 1. 获取外面的父级盒子 var fdj = document.getElementById("fdj"); // 2.获取小的图片 var small = fdj.children[0]; var smallImage = small.children[0]; // 3.获取容纳大图片的盒子 var big = fdj.children[1]; // 4.获取遮罩 var mask = small.children[1]; // 5.获取大的那张图片 var bigImage = big.children[0]; // 6.鼠标经过小的图片的时候显示 small.onmouseover = function(){ mask.style.display = "block"; big.style.display = "block"; } // 7. 鼠标离开时隐藏 small.onmouseout = function(){ mask.style.display = "none"; big.style.display = "none"; } console.log("fdj_marginLeft",document.defaultView.getComputedStyle(fdj, null).marginLeft); var fdj_marginLeft=document.defaultView.getComputedStyle(fdj, null).marginLeft.slice(0,-2); var fdj_marginTop =document.defaultView.getComputedStyle(fdj, null).marginTop.slice(0,-2); function createLine() { var sketchPad=document.getElementById("sketchPad"); var sketchPad_top=document.defaultView.getComputedStyle(sketchPad, null).top.slice(0,-2); var sketchPad_left=document.defaultView.getComputedStyle(sketchPad, null).left.slice(0,-2); // console.log("sketchPad_scrollLeft",sketchPad.scrollLeft); let radius=2;//半径 let pointHtmlStr = `<div style="position:absolute;border-radius: 50%;background: red;width:${radius*2}px;height:${radius*2}px;top:${event.pageY-radius-sketchPad_top+sketchPad.scrollTop-fdj_marginTop}px;left:${event.pageX-radius-sketchPad_left+sketchPad.scrollLeft-fdj_marginLeft}px;"></div>`; sketchPad.innerHTML = sketchPad.innerHTML + pointHtmlStr; let firstPoint = {}; firstPoint.xPoint = event.pageX-sketchPad_left+sketchPad.scrollLeft-fdj_marginLeft; firstPoint.yPoint = event.pageY-sketchPad_top+sketchPad.scrollTop-fdj_marginTop; // console.log("firstPoint1:"+firstPoint.xPoint); function createPoints(event) { var sketchPad=document.getElementById("sketchPad"); let secondPoint = {}; secondPoint.xPoint = event.pageX-sketchPad_left+sketchPad.scrollLeft-fdj_marginLeft; secondPoint.yPoint = event.pageY-sketchPad_top+sketchPad.scrollTop-fdj_marginTop; let lineLength = calcLine(firstPoint, secondPoint); let angle = getAngle( firstPoint.xPoint, firstPoint.yPoint, secondPoint.xPoint, secondPoint.yPoint ); // 设置一个div 宽度为 两点之间的距离,并且以 transform-origin: 0 50% 为圆心旋转,角度已经算出来 let lineHtmlStr = `<div style="position:absolute;border-top:1px solid red;width:${lineLength}px;top:${firstPoint.yPoint}px;left:${firstPoint.xPoint}px;transform:rotate(${angle}deg);transform-origin: 0 0;"></div>`; // let bodyDiv = document.getElementsByTagName("body")[0]; // // 添加到body 后面 // bodyDiv.innerHTML = bodyDiv.innerHTML + lineHtmlStr; sketchPad.innerHTML = sketchPad.innerHTML + lineHtmlStr; // 取消本段的起始点的监听 document.getElementById("sketchPad").removeEventListener("click", createPoints); } // 计算连线长度 function calcLine(firstPoint, secondPoint) { // 计算出两个点之间的距离 let line = Math.sqrt( Math.pow(firstPoint.xPoint - secondPoint.xPoint, 2) + Math.pow(firstPoint.yPoint - secondPoint.yPoint, 2) ); // console.log("calcLinefirstPoint2.xPoint:"+firstPoint.xPoint); // console.log("calcLinesecondPoint2.xPoint:"+secondPoint.xPoint); // console.log("calcLinefirstPoint2.yPoint:"+firstPoint.yPoint); // console.log("calcLinesecondPoint2.yPoint:"+secondPoint.yPoint); console.log("line:",line); return line; } // 计算角度 // 获得人物中心和鼠标坐标连线,与x轴正半轴之间的夹角 function getAngle(x1, y1, x2, y2) { // 获得人物中心和鼠标坐标连线,与x轴正半轴之间的夹角 var x = x1 - x2; var y = y1 - y2; var z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)); var cos = y / z; var radina = Math.acos(cos); // 用反三角函数求弧度 var angle = 180 / (Math.PI / radina); // 将弧度转换成角度 if (x2 > x1 && y2 === y1) { // 在x轴正方向上 angle = 0; } if (x2 > x1 && y2 < y1) { // 在第一象限; angle = angle - 90; } if (x2 === x1 && y1 > y2) { // 在y轴正方向上 angle = -90; } if (x2 < x1 && y2 < y1) { // 在第二象限 angle = 270 - angle; } if (x2 < x1 && y2 === y1) { // 在x轴负方向 angle = 180; } if (x2 < x1 && y2 > y1) { // 在第三象限 angle = 270 - angle; } if (x2 === x1 && y2 > y1) { // 在y轴负方向上 angle = 90; } if (x2 > x1 && y2 > y1) { // 在四象限 angle = angle - 90; } return angle; } // 解决第一次绑定的时候执行方法 // setTimeout(function() { // document.removeEventListener("click", createPoints); // 添加节点 document.getElementById("sketchPad").addEventListener("click", createPoints, false); // 在冒泡过程中处理函数 // }, 0); } //加载任意图片 function selectImage(file) { if (!file.files || !file.files[0]) { return; } var reader = new FileReader(); reader.onload = function (evt) { document.getElementById('imageID').src = evt.target.result; document.getElementById('imageIDBig').src = evt.target.result; image = evt.target.result; } reader.readAsDataURL(file.files[0]); } // 8 鼠标移动 // var x = 0; // var y = 0; small.onmousemove = function(event){ // console.log("mask_display = ", mask.style.display); // console.log("mask_display = ", document.defaultView.getComputedStyle(mask, null).width); var event = event || window.event; // 9.获取在盒子内部的坐标 本身定位了,这里换用父亲边框到body边框的距离 显示在遮罩的中间 var x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth/2+ small.scrollLeft ; var y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight/2+small.scrollTop; console.log("x = ",x); console.log("y = ",y); // console.log("mask_width=",mask.style) // 10.增加限制条件 if(x < 0){ // x = 0; }else if(x > small.offsetWidth - mask.offsetWidth){ // x = small.offsetWidth - mask.offsetWidth; } if(y < 0){![图片说明](https://img-ask.csdn.net/upload/202003/05/1583376605_799804.png) // y = 0; }else if(y > small.offsetHeight - mask.offsetHeight){ // y = small.offsetHeight-mask.offsetHeight; } mask.style.left = x+ "px"; mask.style.top = y + "px"; console.log("mask.style.left = ",mask.style.left); console.log("mask.style.top = ",mask.style.top); console.log(document.getElementsByClassName("mask")[0]); // 11.利用倍数关系显示大图片 开始没有看懂为什么大图片要定位,后来想想只有定位的盒子才有top/left值 var mask_height=window.getComputedStyle(mask).getPropertyValue('height'); var mask_width=window.getComputedStyle(mask).getPropertyValue('width'); var big_height=window.getComputedStyle(big).getPropertyValue('height'); var big_width=window.getComputedStyle(big).getPropertyValue('width'); bigImage.style.left = -x*big_width.slice(0,-2)/mask_width.slice(0,-2) +"px"; bigImage.style.top = -y*big_height.slice(0,-2)/mask_height.slice(0,-2) + "px"; } // console.log("x=",x); // console.log("y=",y); </script> </html> ``` 这是一个自己的小练习,目的就是标记测量图片中相关标的尺寸。鼠标移动时还带有一个放大镜效果。 出现的问题是:点击左下角【创建连线】按钮并点击图中某位置,选中第一个标记点后,通过354-355行中代码设置,在控制台明明看到x和y都在随着鼠标移动不断更新,但是偏偏无法对黄色mask框的left和top正确赋值。想得脑瓜疼,希望指教下 element.style.top和element.style.left控制css属性失效的原因 ``` ![图片说明](https://img-ask.csdn.net/upload/202003/05/1583376642_585681.png)
如何用python屏蔽系统热键alt+Tab?
利用python在开发一个锁屏程序,需要屏蔽掉alt+Tab的系统热键 貌似是用hook完成,但是一直没能理解 如何捕捉ALT+Tab?如何中断热键?
JQuery如何获取循环输出的文本框值
我是初学者,现在做一个用JQuery实现的购物车,SSH框架,JSP页部分代码如下: [code="java"] <c:set scope="session" value="${sessionScope.cart}" var="cart"></c:set> <c:forEach items="${cart.items}" var="ci"> <tr> <td><input type="image" height="80" alt="${ci.commodity.commName }" src="${ci.commodity.simallPic }"/></td> <td>${ci.commodity.commName }<input type="hidden" class="commodityid" value="${ci.commodity.id }" /></td> <td>${ci.commodity.sizeChart }</td> <td>${ci.commodity.sellingPrice }</td> [color=red] <td ><input type="text" value="${ci.count}" class="count" ></td>[/color]//点这个就获取当前的文本框值 <td>${ci.sumprice }</td> </tr> </c:forEach>[/code] JS部分代码: [code="java"]$(".count").blur( function() { $.ajax({ type:"post", url:"saveCart.do?operate=addToCart?", data:{'count=':$(".count").val(),'&commodityid=':$(".commodityid").val()}, timeout: 2000, success:function(data){ alert('ok'); } , error: function(){ alert('错误'); alert($(".count").val()); alert($(".commodityid").val()); } }); }); [/code] 现在想点某一个文本框后获取对应的文本框值,但是总是只能获取第一次循环出来的,求教各位帮小弟解决下,不胜感激。 或者谁能发下修改商品数量后自动更改价格的代码也行,谢谢了。
eclipse中的ctrl+alt+/失效
## eclipse中的ctrl+alt+/自动补全很好用 ## 可是我却按了半天没反应 ## 百度了好像是与显卡快捷键冲突 ## 现在想把显卡的快捷键关掉,试了半天 ## nvidia显卡,我对这个不熟悉,哪位大佬经历过吗
vue使用canvas做横屏手写签名功能,写完后确认生成png图片,但是无法将canvas旋转
本来打算横屏签完名,然后旋转,然后生成png图片。<br/> 但是做到旋转那一步就死了。 <br/> 在最后的**this.saveEl.addEventListener**方法里将canvas旋转 但是用了ctx.rotate 似乎没有用。。。。 求助啊求助 vue 代码 ``` <template> <div class="container"> <div class="sign-box"> <div id="canvas" ref="canvas"></div> <div class="button-box"> <div id="clearCanvas" ref="clearCanvas"> <p>清除</p> </div> <div id="saveCanvas" ref="saveCanvas"> <p>保存</p> </div> </div> </div> <div class="mySign" v-show="isSign"> <img :src="signSrc" alt /> </div> </div> </template> <script> export default { data() { return { isSign: false, signSrc: "" }; }, created() {}, mounted() { this.lineCanvas({ el: this.$refs.canvas, //绘制canvas的父级div clearEl: this.$refs.clearCanvas, //清除按钮 saveEl: this.$refs.saveCanvas //保存按钮 }); }, methods: { lineCanvas(obj) { for (var i in obj) { this[i] = obj[i]; } this.canvas = document.createElement("canvas"); this.el.appendChild(this.canvas); this.ctx = this.canvas.getContext("2d"); let size = { width: this.el.clientWidth, height: this.el.clientHeight }; this.canvas.width = size.width; this.canvas.height = size.height; this.ctx.fillStyle = "#fff"; this.ctx.fillRect(0, 0, size.width, size.height); this.ctx.strokeStyle = "#000"; //用绝对坐标来创建一条路径 this.ctx.beginPath(); //将这条线绘制到canvas上 this.ctx.stroke(); //只有调用stroke canvas 才会绘制图像显示结果 this.ctx.lineWidth = 2; this.ctx.lineCap = "round"; //开始绘制 this.canvas.addEventListener( "touchstart", function(e) { this.ctx.beginPath(); this.ctx.moveTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY); }.bind(this), false ); //绘制中 this.canvas.addEventListener( "touchmove", function(e) { this.ctx.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY); this.ctx.stroke(); }.bind(this), false ); //结束绘制 // this.canvas.addEventListener( // "touchend", // function() { // this.ctx.closePath(); // // let imgBase64 = this.canvas.toDataURL(); // //console.log(imgBase64); // // this.signSrc= imgBase64; // // this.isSign = true; // }.bind(this), // false // ); // //清除画布 this.clearEl.addEventListener( "click", function() { this.ctx.clearRect(0, 0, size.width, size.height); }.bind(this), false ); //保存图片,直接转base64 this.saveEl.addEventListener( "click", function() { let imgBase64 = this.canvas.toDataURL(); this.signSrc = imgBase64; this.isSign = true; this.ctx.clearRect(0, 0, size.width, size.height); }.bind(this), false ); } } }; </script> <style scoped lang="less"> div.sign-box { display: flex; height: 100%; div.button-box { width: 20%; height: 100%; // border: 1px solid red; display: flex; flex-direction: column; justify-content: space-around; div { text-align: center; // border: 1px solid blue; height: 50%; overflow: hidden; p { line-height: 50vh; transform: rotate(90deg); } } } #canvas { width: 80%; height: 100%; position: relative; // background: bisque; canvas { display: block; } } } .mySign { width: 100%; border: 1px solid red; box-sizing: border-box; img { width: 100%; } } </style> ```
求助,declare-styleable自定义的控件属性如何使用 alt + / 选择
在网上下载了一个自定义控件属性的例程,我模仿例程也自己定义了一些自定义的属性,但是例程中自定义的枚举类型和布尔类型值在画面xml中可以像android原生的属性值那样通过 alt + / 快捷键进行值的筛选,我自己定义的就不可以 请教各位大神,要如何做才能将自定义的属性也能像android原生的属性那样通过alt + / 来选择值,是不是我少配了什么文件,是的话,要配置什么文件,如何配置? 在这里先谢谢各位了
有关eclipse中alt/无法使用的问题
用eclipse编写android时,在.xml文件中无法使alt/,没有提示,刚开始还能用,把eclipse关了在打开就不能用了,这该怎么办,?
请问一下为什么在第一次打开网站时图片的高度是0刷新一次之后高度就正常了,该如何让图片的高度在第一次打开时就正常
``` createPicture(base64, obj = {type: "png"}) { let article = this.$container.children("article:last-child"); if (article.length === 0) article = this.addPage(); let h = 0; article.children().each(function () { h += $(this).outerHeight(); }); if (!base64.startsWith("data:image/")) base64 = `data:image/${obj.type};base64,${base64}`; let $new = $(`<img src="${base64}" title="${typeof obj.title === "string" ? obj.title : ""}" alt="${typeof obj.alt === "string" ? obj.alt : ""}">`); if (typeof obj.style === "object" && obj.style !== null) $new.css(obj.style()); article.append($new); if (h + $new.outerHeight() > this.getPageHeightLimit()) { $new.remove(); this.addPage().append($new); } ``` 上面是我动态添加一张图片的方法 请教一下大佬们,我在第一次打开网页时,$new.outerHeight()为0,但刷新一次之后就恢复正常.这是什么原因?我应该如何让$new.outerHeight()在第一次打开时就是正常的高度?
大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了
大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...
在中国程序员是青春饭吗?
今年,我也32了 ,为了不给大家误导,咨询了猎头、圈内好友,以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助,记得帮我点赞哦。 目录: 你以为的人生 一次又一次的伤害 猎头界的真相 如何应对互联网行业的「中年危机」 一、你以为的人生 刚入行时,拿着傲人的工资,想着好好干,以为我们的人生是这样的: 等真到了那一天,你会发现,你的人生很可能是这样的: ...
《MySQL 性能优化》之理解 MySQL 体系结构
本文介绍 MySQL 的体系结构,包括物理结构、逻辑结构以及插件式存储引擎。
python自动下载图片
近日闲来无事,总有一种无形的力量萦绕在朕身边,让朕精神涣散,昏昏欲睡。 可是,像朕这么有职业操守的社畜怎么能在上班期间睡瞌睡呢,我不禁陷入了沉思。。。。 突然旁边的IOS同事问:‘嘿,兄弟,我发现一个网站的图片很有意思啊,能不能帮我保存下来提升我的开发灵感?’ 作为一个坚强的社畜怎么能说自己不行呢,当时朕就不假思索的答应:‘oh, It’s simple. Wait for me for a ...
一名大专同学的四个问题
【前言】   收到一封来信,赶上各种事情拖了几日,利用今天要放下工作的时机,做个回复。   2020年到了,就以这一封信,作为开年标志吧。 【正文】   您好,我是一名现在有很多困惑的大二学生。有一些问题想要向您请教。   先说一下我的基本情况,高考失利,不想复读,来到广州一所大专读计算机应用技术专业。学校是偏艺术类的,计算机专业没有实验室更不用说工作室了。而且学校的学风也不好。但我很想在计算机领...
复习一周,京东+百度一面,不小心都拿了Offer
京东和百度一面都问了啥,面试官百般刁难,可惜我全会。
达摩院十大科技趋势发布:2020 非同小可!
【CSDN编者按】1月2日,阿里巴巴发布《达摩院2020十大科技趋势》,十大科技趋势分别是:人工智能从感知智能向认知智能演进;计算存储一体化突破AI算力瓶颈;工业互联网的超融合;机器间大规模协作成为可能;模块化降低芯片设计门槛;规模化生产级区块链应用将走入大众;量子计算进入攻坚期;新材料推动半导体器件革新;保护数据隐私的AI技术将加速落地;云成为IT技术创新的中心 。 新的画卷,正在徐徐展开。...
轻松搭建基于 SpringBoot + Vue 的 Web 商城应用
首先介绍下在本文出现的几个比较重要的概念: 函数计算(Function Compute): 函数计算是一个事件驱动的服务,通过函数计算,用户无需管理服务器等运行情况,只需编写代码并上传。函数计算准备计算资源,并以弹性伸缩的方式运行用户代码,而用户只需根据实际代码运行所消耗的资源进行付费。Fun: Fun 是一个用于支持 Serverless 应用部署的工具,能帮助您便捷地管理函数计算、API ...
Python+OpenCV实时图像处理
目录 1、导入库文件 2、设计GUI 3、调用摄像头 4、实时图像处理 4.1、阈值二值化 4.2、边缘检测 4.3、轮廓检测 4.4、高斯滤波 4.5、色彩转换 4.6、调节对比度 5、退出系统 初学OpenCV图像处理的小伙伴肯定对什么高斯函数、滤波处理、阈值二值化等特性非常头疼,这里给各位分享一个小项目,可通过摄像头实时动态查看各类图像处理的特点,也可对各位调参、测试...
2020年一线城市程序员工资大调查
人才需求 一线城市共发布岗位38115个,招聘120827人。 其中 beijing 22805 guangzhou 25081 shanghai 39614 shenzhen 33327 工资分布 2020年中国一线城市程序员的平均工资为16285元,工资中位数为14583元,其中95%的人的工资位于5000到20000元之间。 和往年数据比较: yea...
为什么猝死的都是程序员,基本上不见产品经理猝死呢?
相信大家时不时听到程序员猝死的消息,但是基本上听不到产品经理猝死的消息,这是为什么呢? 我们先百度搜一下:程序员猝死,出现将近700多万条搜索结果: 搜索一下:产品经理猝死,只有400万条的搜索结果,从搜索结果数量上来看,程序员猝死的搜索结果就比产品经理猝死的搜索结果高了一倍,而且从下图可以看到,首页里面的五条搜索结果,其实只有两条才是符合条件。 所以程序员猝死的概率真的比产品经理大,并不是错...
害怕面试被问HashMap?这一篇就搞定了!
声明:本文以jdk1.8为主! 搞定HashMap 作为一个Java从业者,面试的时候肯定会被问到过HashMap,因为对于HashMap来说,可以说是Java集合中的精髓了,如果你觉得自己对它掌握的还不够好,我想今天这篇文章会非常适合你,至少,看了今天这篇文章,以后不怕面试被问HashMap了 其实在我学习HashMap的过程中,我个人觉得HashMap还是挺复杂的,如果真的想把它搞得明明白...
毕业5年,我问遍了身边的大佬,总结了他们的学习方法
我问了身边10个大佬,总结了他们的学习方法,原来成功都是有迹可循的。
python爬取百部电影数据,我分析出了一个残酷的真相
2019年就这么匆匆过去了,就在前几天国家电影局发布了2019年中国电影市场数据,数据显示去年总票房为642.66亿元,同比增长5.4%;国产电影总票房411.75亿元,同比增长8.65%,市场占比 64.07%;城市院线观影人次17.27亿,同比增长0.64%。 看上去似乎是一片大好对不对?不过作为一名严谨求实的数据分析师,我从官方数据中看出了一点端倪:国产票房增幅都已经高达8.65%了,为什...
推荐10个堪称神器的学习网站
每天都会收到很多读者的私信,问我:“二哥,有什么推荐的学习网站吗?最近很浮躁,手头的一些网站都看烦了,想看看二哥这里有什么新鲜货。” 今天一早做了个恶梦,梦到被老板辞退了。虽然说在我们公司,只有我辞退老板的份,没有老板辞退我这一说,但是还是被吓得 4 点多都起来了。(主要是因为我掌握着公司所有的核心源码,哈哈哈) 既然 4 点多起来,就得好好利用起来。于是我就挑选了 10 个堪称神器的学习网站,推...
这些软件太强了,Windows必装!尤其程序员!
Windows可谓是大多数人的生产力工具,集娱乐办公于一体,虽然在程序员这个群体中都说苹果是信仰,但是大部分不都是从Windows过来的,而且现在依然有很多的程序员用Windows。 所以,今天我就把我私藏的Windows必装的软件分享给大家,如果有一个你没有用过甚至没有听过,那你就赚了????,这可都是提升你幸福感的高效率生产力工具哦! 走起!???? NO、1 ScreenToGif 屏幕,摄像头和白板...
阿里面试,面试官没想到一个ArrayList,我都能跟他扯半小时
我是真的没想到,面试官会这样问我ArrayList。
曾经优秀的人,怎么就突然不优秀了。
职场上有很多辛酸事,很多合伙人出局的故事,很多技术骨干被裁员的故事。说来模板都类似,曾经是名校毕业,曾经是优秀员工,曾经被领导表扬,曾经业绩突出,然而突然有一天,因为种种原因,被裁员了,...
大学四年因为知道了这32个网站,我成了别人眼中的大神!
依稀记得,毕业那天,我们导员发给我毕业证的时候对我说“你可是咱们系的风云人物啊”,哎呀,别提当时多开心啦????,嗯,我们导员是所有导员中最帅的一个,真的???? 不过,导员说的是实话,很多人都叫我大神的,为啥,因为我知道这32个网站啊,你说强不强????,这次是绝对的干货,看好啦,走起来! PS:每个网站都是学计算机混互联网必须知道的,真的牛杯,我就不过多介绍了,大家自行探索,觉得没用的,尽管留言吐槽吧???? 社...
良心推荐,我珍藏的一些Chrome插件
上次搬家的时候,发了一个朋友圈,附带的照片中不小心暴露了自己的 Chrome 浏览器插件之多,于是就有小伙伴评论说分享一下我觉得还不错的浏览器插件。 我下面就把我日常工作和学习中经常用到的一些 Chrome 浏览器插件分享给大家,随便一个都能提高你的“生活品质”和工作效率。 Markdown Here Markdown Here 可以让你更愉快的写邮件,由于支持 Markdown 直接转电子邮...
看完这篇HTTP,跟面试官扯皮就没问题了
我是一名程序员,我的主要编程语言是 Java,我更是一名 Web 开发人员,所以我必须要了解 HTTP,所以本篇文章就来带你从 HTTP 入门到进阶,看完让你有一种恍然大悟、醍醐灌顶的感觉。 最初在有网络之前,我们的电脑都是单机的,单机系统是孤立的,我还记得 05 年前那会儿家里有个电脑,想打电脑游戏还得两个人在一个电脑上玩儿,及其不方便。我就想为什么家里人不让上网,我的同学 xxx 家里有网,每...
史上最全的IDEA快捷键总结
现在Idea成了主流开发工具,这篇博客对其使用的快捷键做了总结,希望对大家的开发工作有所帮助。
C++(数据结构与算法):62---搜索树(二叉搜索树、索引二叉搜索树)
一、搜索树的复杂度分析 本文考察二叉搜索树和索引二叉搜索树 二叉搜索树的渐进性能可以和跳表媲美: 查找、插入、删除操作所需的平均时间为Θ(logn) 查找、插入、删除操作的最坏情况的时间为Θ(n) 元素按升序输出时所需时间为Θ(n) 虽然在最坏情况下的查找、插入、删除操作,散列表和二叉搜索树的时间性能相同,但是散列表在最好的情况下具有超级性能Θ(1) 不过,对于一个指定的关键...
阿里程序员写了一个新手都写不出的低级bug,被骂惨了。
这种新手都不会范的错,居然被一个工作好几年的小伙子写出来,差点被当场开除了。
谁是华为扫地僧?
是的,华为也有扫地僧!2020年2月11-12日,“养在深闺人不知”的华为2012实验室扫地僧们,将在华为开发者大会2020(Cloud)上,和大家见面。到时,你可以和扫地僧们,吃一个洋...
AI 没让人类失业,搞 AI 的人先失业了
最近和几个 AI 领域的大佬闲聊 根据他们讲的消息和段子 改编出下面这个故事 如有雷同 都是巧合 1. 老王创业失败,被限制高消费 “这里写我跑路的消息实在太夸张了。” 王葱葱哼笑一下,把消息分享给群里。 阿杰也看了消息,笑了笑。在座几位也都笑了。 王葱葱是个有名的人物,21岁那年以全额奖学金进入 KMU 攻读人工智能博士,累计发表论文 40 余篇,个人技术博客更是成为深度学习领域内风向标。 ...
2020年,冯唐49岁:我给20、30岁IT职场年轻人的建议
点击“技术领导力”关注∆每天早上8:30推送 作者|Mr.K 编辑| Emma 来源|技术领导力(ID:jishulingdaoli) 前天的推文《冯唐:职场人35岁以后,方法论比经验重要》,收到了不少读者的反馈,觉得挺受启发。其实,冯唐写了不少关于职场方面的文章,都挺不错的。可惜大家只记住了“春风十里不如你”、“如何避免成为油腻腻的中年人”等不那么正经的文章。 本文整理了冯...
最全最强!世界大学计算机专业排名总结!
我正在参与CSDN200进20,希望得到您的支持,扫码续投票5次。感谢您! (为表示感谢,您投票后私信我,我把我总结的人工智能手推笔记和思维导图发送给您,感谢!) 目录 泰晤士高等教育世界大学排名 QS 世界大学排名 US News 世界大学排名 世界大学学术排名(Academic Ranking of World Universities) 泰晤士高等教育世界大学排名 中国共...
作为一名大学生,如何在B站上快乐的学习?
B站是个宝,谁用谁知道???? 作为一名大学生,你必须掌握的一项能力就是自学能力,很多看起来很牛X的人,你可以了解下,人家私底下一定是花大量的时间自学的,你可能会说,我也想学习啊,可是嘞,该学习啥嘞,不怕告诉你,互联网时代,最不缺的就是学习资源,最宝贵的是啥? 你可能会说是时间,不,不是时间,而是你的注意力,懂了吧! 那么,你说学习资源多,我咋不知道,那今天我就告诉你一个你必须知道的学习的地方,人称...
那些年,我们信了课本里的那些鬼话
教材永远都是有错误的,从小学到大学,我们不断的学习了很多错误知识。 斑羚飞渡 在我们学习的很多小学课文里,有很多是错误文章,或者说是假课文。像《斑羚飞渡》: 随着镰刀头羊的那声吼叫,整个斑羚群迅速分成两拨,老年斑羚为一拨,年轻斑羚为一拨。 就在这时,我看见,从那拨老斑羚里走出一只公斑羚来。公斑羚朝那拨年轻斑羚示意性地咩了一声,一只半大的斑羚应声走了出来。一老一少走到伤心崖,后退了几步,突...
立即提问