Table of Contents
HUI 
Home Backend Development PHP Tutorial H-UI implements image cropping and uploading (code example)

H-UI implements image cropping and uploading (code example)

Oct 08, 2018 pm 01:36 PM
upload picture

How does H-UI implement image cropping and uploading? This chapter will show you how to use H-UI to crop and upload images. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

No more nonsense, let’s go directly to the code:

HTML code:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>HUI 图片剪裁</title>
		<link rel="stylesheet" type="text/css" href="css/hui.css" />
	</head>

	<body>
		<header class="hui-header">
			<div id="hui-back"></div>
			<h1 id="HUI-nbsp">HUI </h1>
		</header>
		<div class="hui-wrap">
			<div id="hui-img-cuter-select">
				<div id="hui-img-cuter-t1">+</div>
				<div id="hui-img-cuter-t2">请选择图片</div>
			</div>
		</div>
		<div id="hui-footer">
			<button type="button" class="hui-button hui-fl" style="margin:2px 0px 0px 8px;" id="selectImgBtn">选择照片</button>
			<button type="button" class="hui-button hui-primary hui-fr" style="margin:2px 8px 0px 0px;" id="uploadBtn">保存照片</button>
		</div>
		<script type="text/javascript" src="js/hui.js" charset="UTF-8"></script>
		<script type="text/javascript" src="js/hui-image-cuter.js" charset="UTF-8"></script>
		<script type="text/javascript">
			/*
			huiImgCuter 参数 
			1. 宽度和高度的比例 高度 / 宽度 默认 1
			2. 最终保存图片的宽度 默认 200px 高度根据宽高比自动调整
			*/
			var cuter = new huiImgCuter();
			//绑定底部的选择按钮
			cuter.bindSelect("#selectImgBtn");
			//保存照片
			hui(&#39;#uploadBtn&#39;).click(function() {
				//获取图片数据
				var imgData = cuter.getImgData();
				if(!imgData) {
					hui.toast(&#39;请选择图片&#39;);
					return;
				}
				hui.loading(&#39;上传图片...&#39;);
				/*
				//上传到服务端演示代码
				hui.post(
				    &#39;http://192.168.31.188/uper.php&#39;,
				    {img:imgData},
				    function(data){
				        hui.closeLoading();
				        hui.toast(&#39;上传成功!&#39;);
				    }
				);
				*/
				setTimeout(function() {
					hui.toast(&#39;上传成功,演示的!&#39;);
					hui.closeLoading();
				}, 2000);
			});
		</script>
	</body>

</html>
Copy after login

Server-side code (uper.php)

<?php 
if(!empty($_POST)){
    if(isset($_POST[&#39;pd&#39;])){
      $_POST[&#39;pd&#39;] = str_replace(&#39;data:image/png;base64,&#39;, &#39;&#39;, $_POST[&#39;pd&#39;]);
    $img = uniqid().&#39;.png&#39;;
    file_put_contents($img, base64_decode($_POST[&#39;pd&#39;]));
    exit($img);
   }
}
?>
Copy after login

Rendering:

H-UI implements image cropping and uploading (code example)

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study.

The above is the detailed content of H-UI implements image cropping and uploading (code example). For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Two Point Museum: All Exhibits And Where To Find Them
1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

WeChat applet implements image upload function WeChat applet implements image upload function Nov 21, 2023 am 09:08 AM

WeChat applet implements picture upload function With the development of mobile Internet, WeChat applet has become an indispensable part of people's lives. WeChat mini programs not only provide a wealth of application scenarios, but also support developer-defined functions, including image upload functions. This article will introduce how to implement the image upload function in the WeChat applet and provide specific code examples. 1. Preparatory work Before starting to write code, we need to download and install the WeChat developer tools and register as a WeChat developer. At the same time, you also need to understand WeChat

Steps to implement image uploading and display using CakePHP framework Steps to implement image uploading and display using CakePHP framework Jul 29, 2023 pm 04:21 PM

Steps to implement image upload and display using CakePHP framework Introduction: In modern web applications, image upload and display are common functional requirements. The CakePHP framework provides developers with powerful functions and convenient tools, making it simple and efficient to upload and display images. This article will introduce you to how to use the CakePHP framework to upload and display images. Step 1: Create a file upload form First, we need to create a form in the view file for users to upload images. The following is an example of

How to handle image uploading and compression in Vue technology development How to handle image uploading and compression in Vue technology development Oct 08, 2023 am 10:58 AM

How to handle image uploading and compression in Vue technology development In modern web applications, image uploading is a very common requirement. However, due to network transmission and storage reasons, directly uploading original high-resolution images may result in slow upload speeds and a large waste of storage space. Therefore, uploading and compressing images is very important. In Vue technology development, we can use some ready-made solutions to handle image uploading and compression. The following will introduce how to use vue-upload-comone

How to use PHP and Vue to implement image upload function How to use PHP and Vue to implement image upload function Sep 25, 2023 pm 03:17 PM

How to use PHP and Vue to implement the image upload function. In modern web development, the image upload function is a very common requirement. This article will introduce in detail how to use PHP and Vue to implement the image upload function, and provide specific code examples. 1. Front-end part (Vue) First, you need to create a form for uploading images on the front-end. The specific code is as follows:&lt;template&gt;&lt;div&gt;&lt;inputtype="fil

Problems encountered in image uploading and cropping when using Vue development Problems encountered in image uploading and cropping when using Vue development Oct 08, 2023 pm 04:12 PM

Title: Image uploading and cropping problems and solutions in Vue development Introduction: In Vue development, image uploading and cropping are common requirements. This article will introduce the image uploading and cropping problems encountered in Vue development, and give solutions and specific code examples. 1. Image upload problem: Selecting the image upload button cannot trigger the file selection box: This problem is usually because the event is not bound correctly or the bound event does not take effect. You can bind the click event in the template and trigger the file selection box in the corresponding method. Code example:

How to use ThinkPHP6 to upload images How to use ThinkPHP6 to upload images Jun 20, 2023 pm 09:25 PM

With the development of the Internet, image uploading has become an essential feature in website and application development. In the field of PHP, ThinkPHP6 has become a very popular development framework. In this article, we will introduce how to use ThinkPHP6 to implement image upload. 1. Create project and controller First, we need to create a new ThinkPHP6 project. You can use Composer to install it, or you can download the latest version from the official website. After the installation is complete, enter in the console

How to use PHP to implement a simple online image upload and display system How to use PHP to implement a simple online image upload and display system Sep 25, 2023 am 09:21 AM

How to use PHP to implement a simple online image upload and display system. Image upload and display system is one of the commonly used functions of modern websites. This function can be quickly implemented using PHP during the development process. This article will introduce how to use PHP to write a simple online image upload and display system, and provide specific code examples. 1. Create database and tables First, we need to create a database and tables to store uploaded image information. Use the following SQL statement to create a table named "images" and set

How to implement image uploading and cropping in Vue technology development How to implement image uploading and cropping in Vue technology development Oct 10, 2023 pm 12:46 PM

How to implement image uploading and cropping in Vue technology development requires specific code examples. In modern web development, image uploading and image cropping are one of the common requirements. As a popular front-end framework, Vue.js provides a wealth of tools and plug-ins to help us achieve these functions. This article will introduce how to implement image uploading and cropping in Vue technology development, and provide specific code examples. The implementation of image upload can be divided into two steps: selecting images and uploading images. In Vue, you can use third-party plugins to simplify this

See all articles