Free Image Storage and graph [demo download], image demo

Free Image Storage and graph [demo download], image demo

Images can be used either on a blog system or on other websites. However, we all know that image access is resource-consuming, disk space-consuming, and bandwidth-consuming.
Therefore, we generally use a specific image server. However, for example, when I wait for some time, I will definitely not spend money on those things. Today, I will introduce a high-speed free unlimited image storage support external chain. Yes, you have not heard the error. Is free of charge. Its name is image library, which may have been known and used by some people. You can skip this step.
After introducing the image library, I will introduce it to you. My graph implementation. What is a graph? It is the bullet screen we often see, but now it is on the picture. Demo address.

Image Library

In fact, the official website has a more detailed documentation: http://open.tietuku.com/doc

The official website provides php sdks. I used to remember to have java, but I have never seen. net. No way. You can only write it by yourself.

In fact, I don't want to explain it too much. When I download the demo, I can understand the official documentation. I will explain how to use it directly.

Step 1: Import TietukeLib. dll.

Is a class library written by myself. The AccessKey and SecertKey can be set at http://open.tietuku.com/manager.

protected void Application_Start(){    TokenHelp.AccessKey = "";    TokenHelp.SecertKey = "";

 

Step 3: Obtain the TeKen in the background during page access, and set the TeKen value in the page space.

Background (album ID view: 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 (album ID, "file"); // file Upload TeKen_WebUrl = TietukeHelp. getToken (album ID, "web"); // weburl uploads return View ();}

Front-end

<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>

:

Demo address: http://hi.haojima.net/TieTuKu/Index

After the above introduction, if you just want to simply use the web page without the source code, you can understand the above. Download TieTuKuLib. dll directly. [Note: the version is. NET Framework4.5 ].

 

If you want to upload images in a non-webpage format, that is, directly using the image file path or network image address in the background, continue to listen to me for further analysis.

In this example, the HttpClient in System. Net. Http. dll is used to simulate get or post requests.

These methods are also encapsulated in the above TieTuKuLib. dll file. Directly TietukeLib. Help. PostReqest can send a post request, and TietukeLib. Help. PostFileReqest can send a post request for image and text content. (Of course, my name is not standard. You can get the source code and modify the name by yourself. I am too lazy to change it here)

Example:

/// <Summary> /// upload the image to the album with the specified album id based on the url image source /// </summary> /// <param name = "url"> url Image source </param> /// <param name = "c_aid"> album id (available on the http://open.tietuku.com/albumpage) </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 ());}

Example:

/// <Summary> /// upload the photo album to the specified album id based on the local file stream // </summary> /// <param name = "c_aid"> album id </param> /// <param name = "imageStream"> file stream </param> /// <param name = "imgName"> file name </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 );}

Here is the introduction to the image library. As a matter of fact, you have understood the above. You can create a free Image website by yourself. What image network? Of course, it is mm img ., In fact, I built one myself, but the scale is a little large, so I won't release the link. Then my blog system will use this to store images.

With images, we can make other interesting things --> "Graph". This is what we will analyze next. All the source code is given below, and the source code is combined with the graph.

 

Illustration

To put it bluntly, we usually see comments floating above the video. Now we just float it on the image, so it's called a graph.

When I see the effects of graphs, the first thing is amazing, and then it is interesting. Then I want to play it on my own. I found the result and couldn't find a similar plug-in. No way, let's continue to make the effort.

In fact, it is quite easy to think about it. It's just a div that keeps moving? Yes, it's that simple. We are often distracted by the effects, but we don't want to implement it at all, or think it will be difficult and too lazy to do it.

Okay, let's talk about it.

First look:

First, you need to display the comment message on the image, you must add a div on the upper layer of the image as the container, and then display the text on the div.

1. How to add a layer div to an image?

position: absolute

"Generate an absolute positioning element, which is located relative to the first parent element other than static positioning .", We are now called a graph container.

2. How to display text in "Graph container?

You can add a div directly in the "Graph container". to better control the position in the container and set the wrapped text, we will continue to set the style absolute.

3. How to move text?

Use the js timer setInterval to change the left position of the div where the text is located.

Let's talk about it in code. The size of the div container on the upper layer of the image must be the same as that on the image. Here we need to dynamically read the loaded image size and then set it accordingly.

When an image is loaded:

// Function imgLoad (obj) {var str_html =$ (". mb "cmd.html (); // fetch template" Graph container "var par = $ (obj ). parent (); // obtain the parent container par of the img. prepend (str_html); // Add it to the above par of the img. find (". div1 "pai.css (" width ", expires (obj).css (" width "); // set the container width to the same par as that of img. find (". div1 "2.16.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: Bullet 1", "test2: Bullet 2", "test3: Bullet 3",]; setInterval (function () {// The timer continuously executes the par. find (". div11 "). each (function () {// obtain the div mesgCycle (this, msgData [imgName]);}) ;}, "10");} where all comment texts are stored ");}

 

Figure "container template"

<Div class = "mb" style = "display: none"> <div class = "div1" style = "background-color: rgba (0.3, 0,); 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: 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 =" Indium "/> <input type =" button "onclick =" but (this ); "value =" Bullet "/> </div>

 

Scheduled execution of moving coordinates:

// The div where the received text is located and the message 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"); then (element).css ("left", elementRight-1); // move an Organization coordinate if (elementRight + elementWidth) = 0) {// If the fully-container mesg [mesg. length] = mesg [0]; $ (element ). text (mesg. shift (); // obtain the next message watermark (element).css ("left", imgWidth-parseint(elemelement).css ("width"); // reset the initial coordinate watermark (element).css ("color ", getColor (); // better text color }}

 

Okay, that's all about the key code. All source code is provided below.

First, I am not a professional front-end. There must be a lot of inappropriate and unreasonable applications (I am just tossing and tossing), and I hope the park friends can provide better solutions. If you think this article is a little useful to you, please give me a thumbs up.
Demo address: http://haojima.net/demo/tuhua
Source code download: http://pan.baidu.com/s/1qW3n3AG
(Note: set your own album ID, AccessKey, and SecertKey in the demo)
Link: http://www.cnblogs.com/zhaopei/p/4931518.html
Welcome to Shanghai "programmers/" and "siege Lions": [Shanghai Ape] 229082941 notice on joining the group

 

 

 

Ps: the demo address is Gao Yuanyuan and Fan Bingbing. It turns out that Fan Bingbing is more fond of Gao Yuanyuan. Vote for your favorite goddess.