C# · 12月 20, 2021

免费图片存储和图话【提供demo下载】

我们不管是做博客系统还是其他网站,图片是免不了要使用到的。但是,我们都知道图片的访问是很耗资源的,同时也是很占磁盘空间的,且还特别占带宽。

所以,我们一般都会用到特定的图片服务器。不过,像我等屌丝平时闹着玩肯定是不会花钱整那些东西。今天我就来介绍一个高速免费无限量图片存储支持外链。是的,你没听错。就是无限量免费。它的名字:,可能有同学知道并且使用过了。那你可以略过了。

介绍完贴图库后,我在向大家介绍下。我的图话实现。图话是什么?就是我们经常看到的弹幕,只不过现在到了图片上面了。。

贴图库

其实官网已经有比较详细的文档了:

官网提供了php的sdk,以前记得也有java的,但是没见过有.net。没办法,只能自己写了。

其实这个我不想做过多的讲解了,等下我提供demo下载,对着官方文档自己就看得懂了。我直接讲下怎么使用。

第一步:导入  。

第二步:在  中系统启动时设置  ,可在查看到。

= = ;

第三步:在页面访问是后台获取TeKen,然后在页面的空间里面设置TeKen值。

后台(相册ID查看:)

TeKen_File = TeKen_WebUrl = <span style=”color: #0000ff;”>public<span style=”color: #000000;”> ActionResult Index()
{
TeKen_File = TietukeHelp.GetToken(<span style=”color: #800080;”>相册ID,<span style=”color: #800000;”>”<span style=”color: #800000;”>file<span style=”color: #800000;”>”<span style=”color: #000000;”>);//文件上传
TeKen_WebUrl = TietukeHelp.GetToken(相册ID,<span style=”color: #800000;”>”<span style=”color: #800000;”>web<span style=”color: #800000;”>”<span style=”color: #000000;”>);//weburl上传
<span style=”color: #0000ff;”>return<span style=”color: #000000;”> View();
}

前台

>

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

效果图:

演示地址:

经过上面的介绍,如果您只是想在网页上简单的使用,并且不关系源码的话,了解了上面的就行了。直接【注意:版本是.NET Framework4.5】。

如果您想在通过非网页的形式,也就是后台直接通过图片文件路径或网络图片地址进行上传的话,那就继续听我往下分析。

所说的后台传图片,其实就是用  中的  来模拟get或者post请求。

这几个方法我也封装到了上面的TieTuKuLib.dll文件里面。直接TietukeLib.Help.PostReqest可以发送内容post请求,TietukeLib.Help.PostFileReqest发送图片和文字内容post请求。()

例:

PostUrlImg( url, data = (TokenHelp.DateTimeToUnixTimestamp(DateTime.Now) + a_data = { deadline = data,aid = c_aid, = = + + TietukeLib.Help.PostReqest(

例:

PostImgData( c_aid,FileStream fileStream,</span><span style=”color: #0000ff;”&gt;var</span> data = (TokenHelp.DateTimeToUnixTimestamp(DateTime.Now) + <span style=”color: #800080;”&gt;60</span><span style=”color: #000000;”&gt;).ToString();</span><span style=”color: #0000ff;”&gt;var</span> a_data = <span style=”color: #0000ff;”&gt;new</span> { deadline = data,<span style=”color: #0000ff;”&gt;from</span> = <span style=”color: #800000;”&gt;”</span><span style=”color: #800000;”&gt;file</span><span style=”color: #800000;”&gt;”</span><span style=”color: #000000;”&gt; };StringBuilder str_content </span>= <span style=”color: #0000ff;”&gt;new</span><span style=”color: #000000;”&gt; StringBuilder();str_content.Append(TokenHelp.GetToken(a_data));</span><span style=”color: #0000ff;”&gt;return</span> Help.PostFileReqest(<span style=”color: #800000;”&gt;”</span><span style=”color: #800000;”&gt;http://up.tietuku.com/</span><span style=”color: #800000;”&gt;”</span><span style=”color: #000000;”&gt;,fileStream,str_content.ToString(),imgName);

}

关于贴图库的介绍就到这里了。其实,你看懂了上面的,完全可以自己建一个免费的图片网站了,什么图片网?当然是MM图片网。

也打算用这个来存图片。

有了图片,我们还可以整点别的好玩的东西–>”图话”,这就是接下来要分析的了。全部的源码下面再给出,和图话源码和一起。

图话

图话,说白了就是我们平时看视频上面飘来飘去的评论。现在我们只是把它飘到了图片上,就叫图话了。

当我看到图话的效果时,第一感觉就是好神奇哦,然后就是挺有意思的。然后就想自己拿来玩玩,结果找了下,没找到类似的插件。没办法,那就自己继续折腾折腾吧。

其实,仔细想想也挺简单的。飘来飘去,不就是一个div不断移动就可以了吗?是的,就是这么简单。我们很时候,都是被效果转移了注意力,而根本就没去想要去怎么实现它,或者以为会很难而懒得动手了。

好,我们说动就动。

先看效果图:

 首先,你需要在图片上显示评论消息,那么必须要图片上层添加一个div作为容器,然后再去div上显示文字。

1、怎么在图片上添加一个层div?

 “生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。”,我们暂且称为图话容器。

2、怎么样在“图话容器”中显示文字?

直接在“图话容器”里面添加div可以了,为了更好的控制在容器里面的位置和让其包裹文字,我们继续设置样式absolute。

3、怎样移动文字?

用js的定时器setInterval来不断改变文字所在div的位置left。

下面我们用代码说话。图片上层的div容器大小肯定要和图片大小一样。这里我们就需要动态读取加载的图片大小然后进行对应的设置。

图片加载时:

str_html = $(“.mb”).html(); par = $(obj).parent(); par.prepend(str_html); par.find(“.div1”).css(“width”,$(obj).css(“width”)); par.find(“.div1”).css(“height”,100 strs = $(obj).attr(“src”).split(‘/’ imgName = strs[strs.length – 1=”name”== [“test1:弹一下吧1″,”test2:弹一下吧2″,”test3:弹一下吧3” () { par.find(“.div11”).each( () { mesgCycle(“10”

图话“容器模版”

</ test3:test3 <

定时执行移动坐标:

elementRight = parseInt($(element).css(“left” elementWidth = parseInt($(element).css(“width” imgWidth = parseInt($(element).parents(“.div_pack”).find(“img”).css(“width””left”,elementRight – 1); ((elementRight + elementWidth) == 0) { mesg[mesg.length] = mesg[0 $(element).css(“left”,imgWidth – parseInt($(element).css(“width”))); $(element).css(“color”,getColor());

好了,关键代码就这些了。下面给出全部源码。

首先,我并非专业前端。肯定有很多用的不合适和不合理的(),希望园友给出更好的解决方案。如果您觉得此文对您有那么一点点用,请轻轻点个赞。

演示地址:

源码下载:

本文链接: 

欢迎上海“程序猿/媛”、”攻城狮”入群:【沪猿】 

ps:演示地址是高圆圆和范冰冰选美pk