前端如何獲取圖片

1. 使用js獲取頁面中所有的圖片地址

var imgs = document.getElementsByTagName("img");var imgURLs=new Array(imgs.length);for(var i = 0;i<imgs.length;i++){ imgURLs[i] = imgs[i].src;//如果用document.getElementsByTagName("img")[i].src;每取一個圖片地址就會對全部圖片查找一次，這樣效率比較低，還是儲存在imgs中比較好！}//以上代碼最好放在頁面的最後面，或window.onload事件里，這樣就不會因為頁面沒有全部載入完而沒有全部讀取到img元素使用js獲取頁面中所有的圖片地址

2. js中怎麼獲取圖片

直接系在innerHtml中只能顯示為文本的

應該把img添加到DOM中去才可以顯示

參考下面的代碼

window.onload=function(){

varo=document.getElementById("C_Top");

varimg=document.createElement("img");

img.src="
https://www..com/img/bdlogo.png
";

varb=document.getElementById("bin2");

b.onclick=function(){

o.appendChild(img);

}

}

這樣才能把img元素添加到document中

3. js怎麼獲取圖片的相對地址

javascript中img.src屬性可以獲取到圖片的完整路徑， 相對路徑要通過與相對位置計算得出。計算方法：
先要明確自己的相對位置在哪，這個是需要人為指定的。
核心代碼如下：
var res=document.getElementById("img").src;
var root_href='根目錄路徑';
res=document.getElementById("img").src.replace(root_href,'');
用jquery方法
var res=$("#img").attr("src");
res=res.substring(res.indexOf("根")+2);
更多關於在上傳文件的過程得到完整路徑的方法請參考如下:
file.select();
var res=document.selection.createRange().text;
var res=file.files.item(0).getAsDataURL();
var res=file.value

4. js圖片沒有id，現在要獲取這張圖片到另外的頁面，該怎麼實現急用，在線等

用Jquery很快就可以做到了，獲取圖片最重要的是知道路徑，知道路徑後就直接能引用了，

而獲取一個元素最好是有class或是id。從你的截圖來看，img外層有一個a標簽且這個標簽有class='pic'。

但是這樣好像還不夠，因為可能擁有同樣的類樣式的a標簽也有多個，同時我們還注意到有一個title的屬性為餐椅，那麼我們就可以這樣寫：

$('a.pic[title=餐椅]>img').attr('src');
//上面的選擇器分析是這樣的，選擇一個class='pic'且title='餐椅的所有a標簽下的所有img標簽直接子元素，.attr()函數就是獲取某一屬性，這里我們明顯要得到圖片的src屬性！

5. 如何通過js獲取網頁中所有圖片並加入點擊事件，實現

在網頁載入完成時，通過js獲取圖片和添加點擊的識別方式

- (void)webViewDidFinishLoad:(UIWebView *)webView {
[IDProgressHUD IDPlaceViewHideDirect:self.view];

//這里是js，主要目的實現對url的獲取
static NSString * const jsGetImages =
@"function getImages(){\
var objs = document.getElementsByTagName(\"img\");\
var imgScr = '';\
for(var i=0;i<objs.length;i++){\
imgScr = imgScr + objs[i].src + '+';\
};\
return imgScr;\
};";

[webView :jsGetImages];//注入js方法
NSString *urlResurlt = [webView :@"getImages()"];
mUrlArray = [NSMutableArray arrayWithArray:[urlResurlt componentsSeparatedByString:@"+"]];
if (mUrlArray.count >= 2) {
[mUrlArray removeLastObject];
}
//urlResurlt 就是獲取到得所有圖片的url的拼接；mUrlArray就是所有Url的數組

//添加圖片可點擊js
[mWebView :@"function registerImageClickAction(){\
var imgs=document.getElementsByTagName('img');\
var length=imgs.length;\
for(var i=0;i<length;i++){\
img=imgs[i];\
img.onclick=function(){\
window.location.href='image-preview:'+this.src}\
}\
}"];
[mWebView :@"registerImageClickAction();"];
}
//在這個方法中捕獲到圖片的點擊事件和被點擊圖片的url

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {

//預覽圖片
if ([request.URL.scheme isEqualToString:@"image-preview"]) {
NSString* path = [request.URL.absoluteString substringFromIndex:[@"image-preview:" length]];
path = [path :NSUTF8StringEncoding];
//path 就是被點擊圖片的url
return NO;
}
return YES;
}

6. 如何在JS中獲取圖片的像素

方法一：獲取圖片的寬高。可以用offsetWidth和offsetHeight;

方法二：

1. 你先獲取img標簽標簽元素。用getElementById()或者getElementsByClassName或者getElementsByTagName()都可以。

2. 獲取之後，如果你的img圖片有width和height 屬性，可以直接用img元素對象點屬性

document.getElementsByTagName("img")[0].width;

document.getElementsByTagName("img")[0].height;

3.如果img元素本身沒有width和height屬性。你可以獲取img元素的style樣式

functiongetStyle(obj,attr){

returnobj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];

｝；

obj是你的img標簽對象，attr是你的想要獲取的屬性；

currentStyle支持IE低版本瀏覽器，

getComputedStyle支持主流瀏覽器

7. 前台html頁面的img標簽圖片想動態從資料庫獲取，如何獲取

1、這個在資料庫中存儲img圖片的地址，前台放置img伺服器標簽，後台讀取資料庫中的img圖片地址賦值。

(7)前端如何獲取圖片擴展閱讀

img 元素向網頁中嵌入一幅圖像。

請注意，從技術上講，<img> 標簽並不會在網頁中插入圖像，而是從網頁上鏈接圖像。<img> 標簽創建的是被引用圖像的佔位空間。

<img> 標簽有兩個必需的屬性：src 屬性 和 alt 屬性。

<img> 標簽的 src 屬性是必需的。它的值是圖像文件的 URL，也就是引用該圖像的文件的的絕對路徑或相對路徑。

為了整理文檔的存儲，創作者通常會把圖像文件存放在一個單獨的文件夾中，而且通常會將這些目錄命名為 "pics" 或者 "images" 之類的名稱。

在 W3School 在線教程中，我們的工程師把大部分常用的圖像都存放到一個名為 "i" 的文件夾中，"i"是 "images" 的縮寫，這樣做的好處是可以最大程度地簡化路徑。

在 HTML 中，<img> 標簽沒有結束標簽。在 XHTML 中，<img> 標簽必須被正確地關閉。

在 HTML 4.01 中，不推薦使用 image 元素的 "align"、"border"、"hspace" 以及 "vspace" 屬性。

在 XHTML 1.0 Strict DTD 中，不支持 image 元素的 "align"、"border"、"hspace" 以及 "vspace" 屬性。

8. js 如何獲取圖片

獲取img對象的屬性，循環遍歷imageOnName2數組對象，取需要的成員賦予src屬性

9. 請問在js中用ajax能獲取圖片嗎

通過ajax去請求圖片路徑，然後再載入到前端頁面上是可以實現的

10. javascript中怎樣讀取指定文件夾里的圖片

var i_strngth = 1;
var i_image = 0;
var imageurl = new Array();
// 這一部分我是手功指定的圖片路徑,你的圖片路徑是放在資料庫中的，只用在這里做更改，把路徑的設置改成動態讀取就可以了
//======================================
imageurl[0] ="images/pic1.gif";
imageurl[1] ="images/pic2.gif";
imageurl[2] ="images/pic3.gif";
imageurl[3] ="images/pic4.gif";
//======================================
function showimage()
{
if(document.all)
{
if (i_strngth <= 110)
{
div_Pic.innerHTML = "<img style=\"filter:alpha(opacity='" + i_strngth + "'); height:248px; width:138px;\" src='" + imageurl[i_image] + "' border='0' />";
i_strngth = i_strngth + 10;
var timer=setTimeout("showimage()", 100);
}
else
{
clearTimeout(timer);
var timer = setTimeout("hideimage()", 1000);
}
}
if(document.layers)
{
clearTimeout(timer)
document.div_Pic.document.write("<img src='" + imageurl[i_image] + "' border='0' style='height:248px; width:138px;' />");
document.close();
i_image++;
if (i_image >= imageurl.length)
{
i_image = 0;
}
var timer = setTimeout("showimage()", 2000);
}
}
function hideimage()
{
if (i_strngth >= -10)
{
div_Pic.innerHTML = "<img style=\"filter:alpha(opacity='" + i_strngth + "'); height:248px; width:138px;\" src='" + imageurl[i_image] + "' border='0' />";
i_strngth = i_strngth - 10;
var timer = setTimeout("hideimage()", 100);
}
else
{
clearTimeout(timer)
i_image++;
if (i_image >= imageurl.length)
{
i_image = 0;
}
i_strngth = 1;
var timer=setTimeout("showimage()", 500);
}
}
那就需要用到Ajax技術，你是用時間來做為圖片名稱，那麼可以用程序取出文件名然後選取離系統當前時間最近的一個文件做為當前顯示的圖片，然後回傳達到JS來進行圖片路徑的更改顯示