Chuyển đến nội dung chính

Bài đăng

Đang hiển thị bài đăng từ tháng một, 2018

Chuyển ảnh thành code HTML với PHP

Bài này mình sẽ giới thiệu với mọi người cách chuyển đổi hình ảnh sang code HTML với PHP. Demo sẽ như sau:


1, Thuật toán.
-Thuật toán xử lý hết sức đơn giản với cách thực hiện như sau:

+ Đầu chúng ta sẽ lấy ra hình ảnh cần quét. Và xác định chiều rộng và chiều dài của ảnh.

+ Sau đó chúng ta sẽ thực hiện lặp từng pixel của ảnh từ trái qua phải và từ trên xuống dưới để lấy mã màu (dạng RGB) của từng điểm ảnh.

+ Và khi có được mã màu rồi thì chúng ta sẽ vẽ nó theo code HTML của chúng ta với mỗi điểm ảnh tương ứng với một thẻ span.


-> Đấy đơn giản đúng không giờ mình cùng đi vào thực hành xem thế nào.

2, Thực hành thuật toán.
-Mình sẽ giải thích trong code luôn nhé!

<?php
//Lấy file ảnh từ máy
// Nếu ảnh png thì dùng hàm ImageCreateFrompng
// $img = ImageCreateFrompng('ha-noi.png');

//Nếu ảnh jpg thì dùng hàm ImageCreateFromJpeg
$image = ImageCreateFromJpeg('ha-noi.jpg');

// Lấy ra chiều rộng của ảnh.
$widthImage = imagesx($image);

//Lấy ra chiều cao của ảnh
$heightImage = imagesy($im…

Thêm Khung Liên Lạc Bên Tay Trái Cho WebBlog

Hôm nay Hùng Coder hướng dẫn cho các bạn một đoạn code khá hay cho các bạn bán hàng online hay tự vấn hổ trợ trực tiếp :), một dạng như chat online nhưng lại có thể gọi điện hoặc nhắn tin cho người đó ^^~.


Nếu bạn nào cần thì có thể bỏ đoạn code bên dưới và bỏ trên thẻ : </body> và lưu lại.

<!-- Support online hungcoder.com -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css' rel='stylesheet'/>
<style>
.support-online{position:fixed;z-index:999;left:1%;bottom:11%}
.support-online a{position:relative;margin:20px 10px;text-align:left;width:40px;height:40px}
.support-online i{width:40px;height:40px;background:#43a1f3;color:#fff;border-radius:100%;font-size:20px;text-align:center;line-height:1.9;position:relative;z-index:999}
.support-online a span{border-radius:2px;text-align:center;background:#67b634;padding:9px;display:none;width:180px;margin-left:10px;position:absolute;col…

Tạo Button Download với CSS hover tuyệt đẹp cho Blogspot

Tạo Button Download với CSS hover tuyệt đẹp cho Blogspot


Chèn CSS trước : ]]></b:skin>
.bsw-btn{border:2px solid;overflow:hidden;position:relative;padding:10px;display:inline-block;width:200px;text-align:center;text-decoration:none!important;text-transform:uppercase;font:500 15px Roboto;margin:10px 0}
.bsw-btn:hover{letter-spacing:2px}
.bsw-btn:after{opacity:.4;background:#4267b2;content:"";height:155px;left:-75px;opacity:2;position:absolute;top:-50px;transform:rotate(35deg);transition:all 1s cubic-bezier(0.19,1,0.22,1);width:100px;z-index:100}
.bsw-btn:hover:after{opacity:1;left:120%;-webkit-transition:all 1s cubic-bezier(0.19,1,0.22,1);transition:all 1s cubic-bezier(0.19,1,0.22,1)}
Cách sử dụng:


<center><a class='bsw-btn bsw_btn' href='http://www.hungcoder.com/' target='blank'title='DEMO'>DEMO</a></center>

DEMO THỦ THUẬT

DEMO
Nguồn: bacsiwindows.com


Tạo thông báo nổi giữa màn hình với hiệu ứng fadeOut

Code tạo Popup thông báo nổi giữa màn hình tự động hiện khi vào trang, có nút tắt hoặc bấm vào bất cứ vị trí nào trên màn hình để tắt. Được tạo từ CSS và Javascript.



Quăng hết đống nào vào trước : </body>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie=function(key,value,options){if(arguments.length>1&&String(value)!=="[object Object]"){options=jQuery.extend({},options);if(value===null||value===undefined){options.expires=-1;}
if(typeof options.expires==='number'){var days=options.expires,t=options.expires=new Date();t.setDate(t.getDate()+days);}
value=String(value);return(document.cookie=[encodeURIComponent(key),'=',options.raw?value:encodeURIComponent(value),options.expires?'; expires='+options.expires.toUTCString():'',options.path?'; path='+options.path:'',options.domain?'; domain='+options.domain:'',options.secure?'; secure':''].join(''));}
options=…

Tạo Popup hiện ra khi click với hiệu ứng đẹp bằng CSS cho Blogspot

Tạo Popup hiện ra khi click với hiệu ứng đẹp bằng CSS cho Blogspot. Sử dụng thẻ HTML :target, popup được thiết kế chỉ hoàn toàn bằng CSS với hiệu ứng và transform tuyệt đẹp cho Blogspot.
Bạn có thể dùng nó để tạo popup thông báo, liên hệ, lưu ý,...


Quăng hết đống code này vào sau thẻ <body>

<style>#bsw_popup{top:0;left:0;right:0;bottom:0;position:fixed;opacity:0;visibility:hidden;transition:.5s;transform:scale(1.2)}
#bsw_popup:target{transform:scale(1);background:rgba(0,0,0,.2);opacity:1;visibility:visible;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;z-index:999999999999;transition:.5s}
.bsw_popup_{background:#fff;border-radius:4px;z-index:999;width:600px;max-width:100%;position:fixed;top:45%;left:50%;transform:translate(-50%,-50%);margin:0;padding:20px;box-sizing:border-box;box-shadow:0 0 100px rgba(0,0,0,.1)}
.bsw_popup_ h2{margin:0 0 .75em;padding:0;text-align:center;font-weight:700;font-family:Roboto,sans-serif;color:#4267b2}
.bsw_popup_ h3{margin:0 0 5px;padding:0;f…

Upload ảnh sử dụng ajax với PHP

Mấy hôm nay lang thang trên các group thấy mọi người hay vướng về upload ảnh sử dụng ajax với PHP, nên hôm nay mình sẽ demo cho các bạn một ứng dụng upload ảnh sử dụng ajax và PHP đơn giản.


1, Tổng quan.
Nhìn chung nếu muốn hiểu được demo này thì các bạn cần phải có các kiến thức cơ bản sau:
PHP : biết được upload file bằng PHP, xử lý chuỗi.Jquery: Biết ajax và thao tác với element cơ bản.

2, Xây dựng.
Cấu Trúc
-Cấu trúc thư mục của ứng dụng sẽ có dạng như sau:
index.html //phần giao diện
upload.php //xử lý upload
uploads // thư mục upload
Giao diện
-Đầu tiên chúng ta sẽ sử dụng HTML và bootstrap để xây dụng giao diện cho ứng dụng.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title> Upload file vs Ajax</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&quo…

[DOWNLOAD] ADOBE AFTER EFECTS CS6 PORTABLE | BẢN KHÔNG CÀI ĐẶT

Hướng dẫn cách tải và cài đặt After Efects CS6 Portable (Bản không cần cài đặt)
Vậy After Efects CS6 là gì?

Affter Efects CS6 là phần mềm đồ họa tổng hợp được nghiên cứu và phát triển bởi hãng Adobe. Phần mềm được ứng dụng nhiều trong đồ họa động và những kỹ xảo phim chuyên nghiệp. Chức năng chính của nó là tạo ra những đồ họa chuyển động kỹ xảo đẹp mắt!
Để sử dụng các bạn nhấn vào link phía dưới để tải After Efects về.


DOWNLOAD

Các bạn tải về rồi giải nén file ra và mở phần mềm lên sử dụng bình thường thôi. Trong lúc mở phần mềm mà nó có xuất hiện cái bản thông báo toàn dấu chấm hỏi thì các bạn cứ nhấn nút OK nhé!

Share Template Blogspot Bảo Trì

Hôm nay mình xin chia sẽ cho mọi người một template đã lâu rồi :), dạng này thì có từ rất lâu rồi nhưng hôm nay mình viết lại bài chia sẽ cho những bạn chưa biết về template này :)


Đó là hình ảnh của template :D, nó rất đơn giản phải không các bạn, và ở phía dưới nó có hiển thị những bài viết của 1 blog nào mà bạn đang còn duy trì và hiển thị tiêu đề ở phía dưới và trượt qua lại cho các bạn nắm bắt tiện ích :)


FULL CODE
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else…