免费图片存储和图话【提供demo下载】
2018-06-18 02:24:28来源:未知 阅读 ()
我们不管是做博客系统还是其他网站,图片是免不了要使用到的。但是,我们都知道图片的访问是很耗资源的,同时也是很占磁盘空间的,且还特别占带宽。
所以,我们一般都会用到特定的图片服务器。不过,像我等屌丝平时闹着玩肯定是不会花钱整那些东西。今天我就来介绍一个高速免费无限量图片存储支持外链。是的,你没听错。就是无限量免费。它的名字:贴图库,可能有同学知道并且使用过了。那你可以略过了。
介绍完贴图库后,我在向大家介绍下。我的图话实现。图话是什么?就是我们经常看到的弹幕,只不过现在到了图片上面了。演示地址。
贴图库
其实官网已经有比较详细的文档了: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图片网。,其实我自己就建了一个,只是尺度有点大,就不放出链接了。然后我的博客系统也打算用这个来存图片。
有了图片,我们还可以整点别的好玩的东西-->"图话",这就是接下来要分析的了。全部的源码下面再给出,和图话源码和一起。
图话
图话,说白了就是我们平时看视频上面飘来飘去的评论。现在我们只是把它飘到了图片上,就叫图话了。
当我看到图话的效果时,第一感觉就是好神奇哦,然后就是挺有意思的。然后就想自己拿来玩玩,结果找了下,没找到类似的插件。没办法,那就自己继续折腾折腾吧。
其实,仔细想想也挺简单的。飘来飘去,不就是一个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://www.cnblogs.com/zhaopei/p/4931518.html
欢迎上海“程序猿/媛”、"攻城狮"入群:【沪猿】229082941 入群须知
ps:演示地址是高圆圆和范冰冰选美pk,事实证明,喜欢高圆圆的要多过范冰冰啊。赶快为你心仪的女神投上一票吧。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- C++ 共用体 2020-06-05
- STM32F103驱动M24256 256k存储芯片进行读写 2020-05-28
- C++ 自动变量 2020-05-10
- C++ 存储持续性 2020-05-10
- 图的连通分量(利用邻接表存储信息) 2020-04-02
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash