免費圖片存儲和圖話【提供demo下載】

2019-11-14 15:44:03

字體：大中小

來源：轉載

供稿：網友

我們不管是做博客系統還是其他網站，圖片是免不了要使用到的。但是，我們都知道圖片的訪問是很耗資源的，同時也是很占磁盤空間的，且還特別占帶寬。
所以，我們一般都會用到特定的圖片服務器。不過，像我等屌絲平時鬧著玩肯定是不會花錢整那些東西。今天我就來介紹一個高速免費無限量圖片存儲支持外鏈。是的，你沒聽錯。就是無限量免費。它的名字：貼圖庫，可能有同學知道并且使用過了。那你可以略過了。
介紹完貼圖庫后，我在向大家介紹下。我的圖話實現。圖話是什么？就是我們經?？吹降膹椖?，只不過現在到了圖片上面了。演示地址。

貼圖庫

其實官網已經有比較詳細的文檔了：http://open.tietuku.com/doc

官網提供了php的sdk，以前記得也有java的，但是沒見過有.net。沒辦法，只能自己寫了。

其實這個我不想做過多的講解了，等下我提供demo下載，對著官方文檔自己就看得懂了。我直接講下怎么使用。

第一步：導入 TietukeLib.dll 。

就是我自己寫的一個類庫。

第二步：在 Global.asax 中系統啟動時設置 accessKey和SecertKey ，可在http://open.tietuku.com/manager查看到。

PRotected void application_Start(){    TokenHelp.AccessKey = "";    TokenHelp.SecertKey = "";

第三步：在頁面訪問是后臺獲取TeKen，然后在頁面的空間里面設置TeKen值。

后臺(相冊ID查看：http://open.tietuku.com/album)

 public static string TeKen_File = string.Empty; public static string TeKen_WebUrl = string.Empty; public ActionResult Index() {     TeKen_File = TietukeHelp.GetToken(相冊ID, "file");//文件上傳     TeKen_WebUrl = TietukeHelp.GetToken(相冊ID, "web");//weburl上傳     return View(); }

前臺

<div style="margin: 5px; padding: 5px; border: 1px dashed #0094ff">    <form enctype="multipart/form-data" method="post" action="http://up.tietuku.com/">        <input name="Token" value="@(Hi.Web.Controllers.TieTuKuController.TeKen_File)" type="hidden">        <input type="file" name="file">        <input type="submit">    </form></div><div style="margin:5px;padding:5px;border:1px dashed #0094ff">    <form method="post" action="http://up.tietuku.com/">        ImgUrl:<input name="Token" value="@(Hi.Web.Controllers.TieTuKuController.TeKen_WebUrl)" type="hidden">        <input type="text" name="fileurl">        <input type="submit">    </form></div>

效果圖：

演示地址：http://hi.haojima.net/TieTuKu/Index

經過上面的介紹，如果您只是想在網頁上簡單的使用，并且不關系源碼的話，了解了上面的就行了。直接下載TieTuKuLib.dll【注意：版本是.NET Framework4.5】。

如果您想在通過非網頁的形式，也就是后臺直接通過圖片文件路徑或網絡圖片地址進行上傳的話，那就繼續聽我往下分析。

所說的后臺傳圖片，其實就是用 System.Net.Http.dll 中的 HttpClient 來模擬get或者post請求。

這幾個方法我也封裝到了上面的TieTuKuLib.dll文件里面。直接TietukeLib.Help.PostReqest可以發送內容post請求，TietukeLib.Help.PostFileReqest發送圖片和文字內容post請求。（當然，我的命名不規范。您可以拿到源碼后自己修改下命名。我這里就懶得改了）

例：

/// <summary>/// 根據url圖片源 上傳到指定相冊id的相冊/// </summary>/// <param name="url">url圖片源</param>/// <param name="c_aid">相冊id(http://open.tietuku.com/album頁面可以查看到)</param>/// <returns></returns>public static string PostUrlImg(string url, int c_aid){    var data = (TokenHelp.DateTimeToUnixTimestamp(DateTime.Now) + 60).ToString();    var a_data = new { deadline = data, aid = c_aid, from = "web" };    StringBuilder str_content = new StringBuilder();    str_content.Append("Token=" + TokenHelp.GetToken(a_data));    str_content.Append("&fileurl=" + url);    return TietukeLib.Help.PostReqest("http://up.tietuku.com/", str_content.ToString());}

例：

/// <summary>/// 根據本地文件流 上傳到指定相冊id的相冊/// </summary>/// <param name="c_aid">相冊id</param>/// <param name="imageStream">文件流</param>/// <param name="imgName">文件名</param>/// <returns></returns>public static string PostImgData(int c_aid, FileStream fileStream, string imgName){    var data = (TokenHelp.DateTimeToUnixTimestamp(DateTime.Now) + 60).ToString();    var a_data = new { deadline = data, aid = c_aid, from = "file" };    StringBuilder str_content = new StringBuilder();    str_content.Append(TokenHelp.GetToken(a_data));    return Help.PostFileReqest("http://up.tietuku.com/", fileStream, str_content.ToString(), imgName);}

關于貼圖庫的介紹就到這里了。其實，你看懂了上面的，完全可以自己建一個免費的圖片網站了，什么圖片網？當然是MM圖片網。，其實我自己就建了一個，只是尺度有點大，就不放出鏈接了。然后我的博客系統也打算用這個來存圖片。

有了圖片，我們還可以整點別的好玩的東西-->"圖話"，這就是接下來要分析的了。全部的源碼下面再給出，和圖話源碼和一起。

圖話

圖話，說白了就是我們平時看視頻上面飄來飄去的評論?，F在我們只是把它飄到了圖片上，就叫圖話了。

當我看到圖話的效果時，第一感覺就是好神奇哦，然后就是挺有意思的。然后就想自己拿來玩玩，結果找了下，沒找到類似的插件。沒辦法，那就自己繼續折騰折騰吧。

其實，仔細想想也挺簡單的。飄來飄去，不就是一個div不斷移動就可以了嗎？是的，就是這么簡單。我們很時候，都是被效果轉移了注意力，而根本就沒去想要去怎么實現它，或者以為會很難而懶得動手了。

好，我們說動就動。

先看效果圖：

首先，你需要在圖片上顯示評論消息，那么必須要圖片上層添加一個div作為容器，然后再去div上顯示文字。

1、怎么在圖片上添加一個層div？

position: absolute

“生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。”，我們暫且稱為圖話容器。

2、怎么樣在“圖話容器”中顯示文字？

直接在“圖話容器”里面添加div可以了，為了更好的控制在容器里面的位置和讓其包裹文字，我們繼續設置樣式absolute。

3、怎樣移動文字？

用js的定時器setInterval來不斷改變文字所在div的位置left。

下面我們用代碼說話。圖片上層的div容器大小肯定要和圖片大小一樣。這里我們就需要動態讀取加載的圖片大小然后進行對應的設置。

圖片加載時：

//圖片加載時function imgLoad(obj) {    var str_html = $(".mb").html();//取模版"圖話容器"    var par = $(obj).parent();//取到img的父容器    par.prepend(str_html);//添加到img的上面    par.find(".div1").CSS("width", $(obj).css("width"));//設置容器的寬度和img一樣    par.find(".div1").css("height", 100);    var strs = $(obj).attr("src").split('/');    var imgName = strs[strs.length - 1];    imgName = isc(imgName);    $(obj).attr("name", imgName);    msgKey[msgKey.length] = imgName;    msgData[imgName] = ["test1:彈一下吧1", "test2:彈一下吧2", "test3:彈一下吧3", ];    setInterval(function () {//定時器 不斷執行        par.find(".div11").each(function () {//取到所有的 評論文字 所在div            mesgCycle(this, msgData[imgName]);        });    }, "10");}

圖話“容器模版”

<div class="mb" style="display:none">    <div class="div1" style="background-color: rgba(0,0,0,0.3); position: absolute;overflow:hidden;">        <div class="div11" style="top: 11px; left: 50px; font-size: 20px; color: rgba(0,0,0,0.3); position: absolute; overflow: hidden;">            test:測試1        </div>        <div class="div11" style="top: 28px; left: 90px; font-size: 20px; color: #ff6a00; position: absolute; overflow: hidden; "></div>        <div class="div11" style="top: 51px; left: 40px; font-size: 20px; color:#4cff00; position: absolute; overflow: hidden; ">test3:test3</div>        <div style="position:absolute;bottom:0px;width:100%">            <div class="but_div" style="display: table; margin: 0 auto">                <input type="text" class="inp" /><input type="button" onclick="but(this);" value="彈一個" />            </div>        </div>    </div></div>

定時執行移動坐標：

//接收 文字所在div  和 消息function mesgCycle(element, mesg) {    var elementRight = parseInt($(element).css("left"));    var elementWidth = parseInt($(element).css("width"));    var imgWidth = parseInt($(element).parents(".div_pack").find("img").css("width"));    $(element).css("left", elementRight - 1);//移動一個單位坐標    if ((elementRight + elementWidth) == 0) {//如果完全容器        mesg[mesg.length] = mesg[0];        $(element).text(mesg.shift());//取下一條消息        $(element).css("left", imgWidth - parseInt($(element).css("width")));//重新設置初始坐標        $(element).css("color", getColor());//更好文字顏色    }}

好了，關鍵代碼就這些了。下面給出全部源碼。

首先，我并非專業前端。肯定有很多用的不合適和不合理的（我只是瞎折騰），希望園友給出更好的解決方案。如果您覺得此文對您有那么一點點用，請輕輕點個贊。
演示地址：http://haojima.net/demo/tuhua
源碼下載：http://pan.baidu.com/s/1qW3n3AG
(注意：demo里面要設置你自己的相冊ID、AccessKey 和 SecertKey )
本文鏈接：http://m.survivalescaperooms.com/zhaopei/p/4931518.html
歡迎上海“程序猿/媛”、"攻城獅"入群：【滬猿】229082941 入群須知

ps:演示地址是高圓圓和范冰冰選美pk，事實證明，喜歡高圓圓的要多過范冰冰啊。趕快為你心儀的女神投上一票吧。