Giới thiệu

Chào những bạn, chắc hẳn mọi fan đều nhớ bao gồm một thời, comment bằng hình ảnh GIF biến hóa một trào lưu, và mang lại giờ nó cũng chưa hề hạ nhiệt. 1 phần vì những hình ảnh GIF đó miêu tả được xúc cảm của người comment rõ hơn là emotion, có tương đối nhiều hình vui nhộn, sống động.

Bạn đang xem: Giphy: the gif search engine 17+

Các bạn có thể sử dụng sdk của Facebook để bê nguyên phần comment của tín đồ ta, hoặc trường đoản cú mình tạo ra phần bình luận sử dụng GIF và emotion. Bài bác này mình sẽ chạy thử với GIF nhé.

Kho hình ảnh GIF mình đã lấy nghỉ ngơi trang này: https://tenor.com/gifapi/documentation

Trong trang đó chúng ta tạo tài khoản, kế tiếp tạo apps của mình để lấy được API key.

Demo

Trong phần demo này, bản thân sẽ áp dụng Laravel 5.4. Công việc thực hiện sẽ được liệt kê bên dưới đây:

1. Tạo nên route

Đầu tiên bọn họ sẽ tạo thành routes mang đến hệ thống comment trong tệp tin route/web.php:

Route::resource("comments", "Comments
Controller");Route::get("/comments/get
Gif", "Comments
Controller
get
Gif
Image");Vì ngôn từ khá lâu năm nên ở chỗ này mình sẽ không còn hướng dẫn các bước list với lưu bình luận mà chỉ hướng dẫn làm thay nào để lấy ảnh GIF để bình luận thôi.

2. Sản xuất controller

Mình tạo ra file app/Http/Controllers/Comments
Controller.php:

namespace AppHttpControllersWeb;use IlluminateSupportFacadesView;use IlluminateHttpRequest;use AppModelsComment;class Comments
Controller extends Controller public function __construct() parent::__construct(); public function get
Gif
Image() return View::make("web.comments.popup_gif_image") //day la phan noi dung hien thi anh gif ->render();

2. Tạo nên file blade: comment.blade.php

Phần này sẽ hiển thị 1 ô để người dùng comment, một button GIF để người tiêu dùng chọn hình ảnh GIF cùng 1 button POST nhằm post comment.

Form::open(< "url" => action_locale("Comments
Controller
store"), "method" => "POST", "class" => "comment-to-top form-create-comment form-comment", >) Form::textarea("content", null, < "class" => "comment-input post-comment form-control", "placeholder" => "Write a comment...", "rows" => 4, >) div class="create-comment-form"> div class="btn-group--left"> a class="btn-gif show-gifs-selection" href="javascript:;"> span>GIF/span> /a> div class="popup-gif-search">/div> /div> div class="btn-group--right"> button class="send-comment" id="post-btn" type="button"> POST /button> /div> /div> Form::close()

3. Chế tạo file blade popup_gif_image.blade.php

Khi kích vào button GIF thì sẽ chỉ ra một popup bao gồm 1 ô tìm kiếm + một số hình ảnh GIF cho người dùng lựa chọn. Và đây là phần hiển thị ngôn từ đó, ảnh GIF được lấy ra sẽ được append vào class .body-result-gifs.

div class="gifs-comment-block" id="gifs-search-block"> div class="popup-gif"> div class="popup-content"> div class="search-for-text"> input đầu vào type="text" id="search-gif-input" class="form-control text-search-gif pull-left input-sm" placeholder="Search images"> i class="fa fa-search search-image-gif" id="search-gif-btn" aria-hidden="true">/i> /div> div class="body-result-gifs">/div> /div> /div>/div>

4. Tạo nên file comment.js

$(function () base
Url
Locale = function () return BASE_URL + "/" + BASE_LOCALE + "/"; ; $(window).on("click", function() $(".popup-gif-search").html(""); ); // lúc click vao nut GIF $("body").on("click", ".show-gifs-selection", function (event) event.stop
Propagation(); get
Gif
Popup($(this).parents(".form-comment")); ); // lúc click vao nut tìm kiếm anh GIF tren popup $("body").on("keydown", "#search-gif-input", function (e) if (e.which == 13) search
Gif($(this).parents(".gifs-comment-block")); return false; );); // hien thi popupfunction get
Gif
Popup(element) var popup
Area = element.find(".popup-gif-search"); var gif
Picker = element.find("#gifs-search-block"); if (gif
Picker) gif
Picker.css("display", "none"); $(".popup-gif-search").html(""); $.ajax( "url": base
Url
Locale() + "comments/get
Gif", "type": "GET", success: (response) => popup
Area.html("").append(response); var gif
Picker = element.find("#gifs-search-block"); element.find("#search-gif-input").val(""); gif
Picker.css("display", "block"); delete $.ajax
Settings.headers<"X-CSRF-TOKEN">; $.ajax( "url": "https://api.tenor.co/v1/trending?key=api_key&limit=40", "type": "GET", success: (data) => popup
Area.find(".body-result-gifs").html(""); $.each(data.results, function(key, value) popup
Area.find(".body-result-gifs").append("<"gif"><"url"> + "">"); ); init
Gif
Scroll(); ); );//scroll de chon image GIFfunction init
Gif
Scroll() $(".body-result-gifs").add
Class("open"); $(".body-result-gifs").j
Scroll
Pane(); $(".body-result-gifs").remove
Class("open");// tìm kiếm anh GIFfunction search
Gif(element) var từ khoá = element.find(".text-search-gif").val(); if (keyword) delete $.ajax
Settings.headers<"X-CSRF-TOKEN">; $.ajax( "url": "https://api.tenor.co/v1/search?tag=" + từ khóa + "&key=app_key&limit=10", "type": "GET", success: (data) => $("#gifs-search-block .body-result-gifs .jsp
Pane").html(""); $.each(data.results, function(key, value) $("#gifs-search-block .body-result-gifs .jsp
Pane").append("<"gif"><"url"> + "">"); ); ); các bạn nhớ thêm app_key vào code để mang được links api nhé. Chúng ta thử truy cập vào liên kết này: https://api.tenor.co/v1/trending?key=HX6I6FBY3S97&limit=10 của mình, dữ liệu hiển thị rất giản đơn nhìn đề nghị không. Mình chỉ việc lấy ra url để phân phối thẻ img, hiển thị ra bên ngoài.Ngoài ra còn có các option lấy hình ảnh GIF, chúng ta có thể tìm hiểu thêm ở liên kết này: https://tenor.com/gifapi/documentation#quickstart

Kết luận

Việc lấy hình ảnh GIF này thiệt ra rất 1-1 giản. Sau khi phản hồi bằng ảnh GIF thì các bạn cũng chỉ việc lấy url của nó lưu vào vào db nhưng thôi. Cảm ơn các bạn đã theo dõi.

Converting clip to animated GIF is a relatively simple trick but not many users are aware of it. By following the steps below, you"ll have some amusing GIF images. Use these converted GIF images to mô tả on Facebook, Zalo, và with friends.
Animated GIF images are among the most fascinating types of images on computers. Images extracted from videos automatically run continuously, creating extremely interesting visuals. Surely, we"ve all seen GIF images on websites or social networks, haven"t we? Ever wondered how khổng lồ create an animated GIF? In fact, not many know how to create this type of GIF image. Lớn get a GIF image, you need lớn know how khổng lồ convert clip to animated GIF on your computer.

Xem thêm: Local Content Requirements Là Gì, Ý Nghĩa Của Local Content Trong Tiếng Anh

How lớn Convert đoạn phim to Animated GIF:

Step 1: You can quickly convert video clip to animated GIF online. First, visit HERE khổng lồ go khổng lồ the website for converting đoạn clip to animated GIF online.

You can choose khổng lồ get videos from Google Drive, Dropbox, or URL link. But the fastest way is still to lớn Upload video from your computer lớn this tool.

Step 2: Once you have selected From Computer, you need lớn find the folder containing the đoạn phim on your computer. Click choose clip and press Open.

Step 3: Immediately the đoạn clip file will be uploaded lớn this conversion website. Lớn convert clip to animated GIF, you need khổng lồ click on the word CONVERT. One thing to lưu ý for users when wanting lớn convert clip to animated GIF is that you should use short-duration videos, preferably under 10 seconds lớn receive suitable GIF images.

Step 4: Once successfully converted, simply press Download to receive the GIF image.

Open the GIF image on your computer to reviews the clip you just converted into a GIF.

It"s quite easy for users to lớn convert video clip to GIF, isn"t it? In addition khổng lồ the online tool that cachseo.com just guided, there are also ways to create GIF images with software. Specifically, there are up to top 5 best GIF animation software for computers. You can try downloading Top 5 best GIF animation software và compare with converting video to GIF to see which trick is faster & more effective.

If you want to create GIFs from online services or on online websites, you can access the best gif creation websites today khổng lồ assist you in creating gifs faster. There are many gif creation websites for you lớn choose from.