Web Front-end
JS Tutorial
Simple implementation of cropping images and storing them using Javascript
Simple implementation of cropping images and storing them using Javascript
This article mainly introduces the simple implementation of using Javascript to crop pictures and store them. It has a certain reference value. Now I share it with you. Friends in need can refer to it.
Crop pictures for us I am very familiar with it. I have encountered this need again at work recently, so I thought I would simply sort it out. The method can be referenced by everyone and myself when needed. Therefore, this article mainly introduces the simple method of cropping pictures and storing them using Javascript. For implementation, I use the THINKPHP framework for back-end PHP processing. Friends in need can refer to it.
Preface
As far as I am concerned, there are not many parts of the page that are more flexible in design, such as sliding verification codes and image cropping. Waiting for better interaction design.
When I first started working, I wanted to understand these things, but I never had the need. I took advantage of my free time today and studied it all afternoon. During this period, I encountered problems of all sizes, and I have been preparing for them. Being tortured actually reflects a problem. My
is still relatively weak.
Achievement effect:
After the user clicks to upload the image, the page displays the uploaded image, and a cropping box and two preview areas appear. Finally, click the crop button to save the cropped image to the server.
The effect is very simple. There are two difficulties I encountered in the whole process. The first is the JS effect of cropping, and the second is the processing of image data.
For the first question, I quoted a plug-in on the Internet. As far as I feel, the user satisfaction in the cropping process can only be considered average, because it can only crop square areas. , even though there are eight pull settings on the border, the frame still scales according to the square when pulling the frame, which is not very satisfactory to me.
The implementation method is as follows:
The following is a simple page design:
<p style="float:left;"><img id="target"></p>
<p style="width:48px;height:48px;margin:10px;overflow:hidden; float:left;"><img style="float:left;" id="preview" ></p>
<p style="width:190px;height:195px;margin:10px;overflow:hidden; float:left;"><img style="float:left;" id="preview2" ></p>
<form action="{:U('/test/crop_deal')}" method="post" onsubmit="return checkCoords()" enctype="multipart/form-data" id="form">
<input type="file" name="file" onchange="change_image(this)">
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="submit" value="裁剪"/>
</form>The following is the JS code:
function change_image(file){
var reader = new FileReader();
reader.onload = function(evt){
$("#target").attr('src',evt.target.result);
$('#preview').attr('src',evt.target.result);
$('#preview2').attr('src',evt.target.result);
// $('#target').css({"height":"600px","width":"600px"});
// 限制了大小会影响到截图的效果
};
reader.readAsDataURL(file.files[0]);
var jcrop_api, boundx, boundy;
setTimeout(function(){
$('#target').Jcrop({
minSize: [48,48],
setSelect: [0,0,190,190],
onChange: updatePreview,
onSelect: updatePreview,
onSelect: updateCoords,
aspectRatio: 1
},
function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
});
function updatePreview(c){
if (parseInt(c.w) > 0)
{
var rx = 48 / c.w; //小头像预览p的大小
var ry = 48 / c.h;
$('#preview').css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
{
var rx = 199 / c.w; //大头像预览p的大小
var ry = 199 / c.h;
$('#preview2').css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
};
function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
},500);
}Here are a few thoughts Click to remind:
First: Don’t forget to introduce the plug-in at the head of the page:
<script src="/plug/js/jquery.min.js" type="text/javascript"></script> <script src="/plug/js/jquery.Jcrop.min.js" type="text/javascript"></script> <link rel="stylesheet" href="/plug/css/Jcrop.css" rel="external nofollow" type="text/css" />
Second: Some If you have a sharp eye, you may have noticed that there is a timing in JS, and at the same time, you are confused. Isn't this a bit unnecessary? Actually no, it takes time to upload the image to JS and load it on the page. The meaning of this timing is to wait until the image is loaded on the page by JS before loading the cropping effect. This is also obtained after repeated experiments. way of doing.
I use the THINKPHP framework for back-end PHP processing, the version is 3.1.3Paste the code:
function crop_deal(){
ob_clean();
import ( 'ORG.Net.UploadFile' );
$upload = new UploadFile ();
$upload->maxSize = 2000000;
$upload->allowExts = array (
'jpg',
'gif',
'png',
'jpeg'
);
$upload->savePath = './upload/test/';
$upload->autoSub = true;
$upload->subType = 'date';
$upload->dateFormat = 'Ymd';
if ($upload->upload () ) {
$info = $upload->getUploadFileInfo();
$new_path = "./upload/test/thumb".date('Ymd');
$file_store = $new_path."/".date('YmdHis').".jpg";
if(!file_exists($new_path)){
mkdir($new_path,0777,true);
}
$source_path = "http://".$_SERVER['HTTP_HOST']."/upload/test/".$info[0]['savename'];
$img_size = getimagesize($source_path);
$width = $img_size[0];
$height = $img_size[1];
$mime = $img_size['mime'];
$srcImg = imagecreatefromstring(file_get_contents($source_path));
$cropped_img = imagecreatetruecolor($_POST['w'], $_POST['h']);
//缩放
// imagecopyresampled($cropped_img,$srcImg,0,0,$_POST['x'],$_POST['y'],$_POST['w'],$_POST['h'],$width,$height);
//裁剪
imagecopy($cropped_img,$srcImg,0,0,$_POST['x'],$_POST['y'],$_POST['w'],$_POST['h']);
header("Content-Type:image/jpeg");
imagejpeg($cropped_img,$file_store);
imagedestroy($srcImg);
imagedestroy($cropped_img);
}
}Here are a series of methods to call the GD library to create images. The most important thing is
imagecopy(), which copies the original image to the new one according to the specified cropping position and cropping size. The picture goes up, which also illustrates one thing. When the page user cuts the picture , the front end does not actually operate on the picture. Instead, it obtains the coordinate position when cropping, the cropping size, and then submits it to PHP for operation! !
Related recommendations:
The above is the detailed content of Simple implementation of cropping images and storing them using Javascript. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Recommended: Excellent JS open source face detection and recognition project
Apr 03, 2024 am 11:55 AM
Face detection and recognition technology is already a relatively mature and widely used technology. Currently, the most widely used Internet application language is JS. Implementing face detection and recognition on the Web front-end has advantages and disadvantages compared to back-end face recognition. Advantages include reducing network interaction and real-time recognition, which greatly shortens user waiting time and improves user experience; disadvantages include: being limited by model size, the accuracy is also limited. How to use js to implement face detection on the web? In order to implement face recognition on the Web, you need to be familiar with related programming languages and technologies, such as JavaScript, HTML, CSS, WebRTC, etc. At the same time, you also need to master relevant computer vision and artificial intelligence technologies. It is worth noting that due to the design of the Web side
Huawei will launch innovative MED storage products next year: rack capacity exceeds 10 PB and power consumption is less than 2 kW
Mar 07, 2024 pm 10:43 PM
This website reported on March 7 that Dr. Zhou Yuefeng, President of Huawei's Data Storage Product Line, recently attended the MWC2024 conference and specifically demonstrated the new generation OceanStorArctic magnetoelectric storage solution designed for warm data (WarmData) and cold data (ColdData). Zhou Yuefeng, President of Huawei's data storage product line, released a series of innovative solutions. Image source: Huawei's official press release attached to this site is as follows: The cost of this solution is 20% lower than that of magnetic tape, and its power consumption is 90% lower than that of hard disks. According to foreign technology media blocksandfiles, a Huawei spokesperson also revealed information about the magnetoelectric storage solution: Huawei's magnetoelectronic disk (MED) is a major innovation in magnetic storage media. First generation ME
WebSocket and JavaScript: key technologies for implementing real-time monitoring systems
Dec 17, 2023 pm 05:30 PM
WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology
Essential tools for stock analysis: Learn the steps to draw candle charts with PHP and JS
Dec 17, 2023 pm 06:55 PM
Essential tools for stock analysis: Learn the steps to draw candle charts in PHP and JS. Specific code examples are required. With the rapid development of the Internet and technology, stock trading has become one of the important ways for many investors. Stock analysis is an important part of investor decision-making, and candle charts are widely used in technical analysis. Learning how to draw candle charts using PHP and JS will provide investors with more intuitive information to help them make better decisions. A candlestick chart is a technical chart that displays stock prices in the form of candlesticks. It shows the stock price
PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts
Dec 18, 2023 pm 03:39 PM
With the rapid development of Internet finance, stock investment has become the choice of more and more people. In stock trading, candle charts are a commonly used technical analysis method. It can show the changing trend of stock prices and help investors make more accurate decisions. This article will introduce the development skills of PHP and JS, lead readers to understand how to draw stock candle charts, and provide specific code examples. 1. Understanding Stock Candle Charts Before introducing how to draw stock candle charts, we first need to understand what a candle chart is. Candlestick charts were developed by the Japanese
Git installation process on Ubuntu
Mar 20, 2024 pm 04:51 PM
Git is a fast, reliable, and adaptable distributed version control system. It is designed to support distributed, non-linear workflows, making it ideal for software development teams of all sizes. Each Git working directory is an independent repository with a complete history of all changes and the ability to track versions even without network access or a central server. GitHub is a Git repository hosted on the cloud that provides all the features of distributed revision control. GitHub is a Git repository hosted on the cloud. Unlike Git which is a CLI tool, GitHub has a web-based graphical user interface. It is used for version control, which involves collaborating with other developers and tracking changes to scripts and
Simple JavaScript Tutorial: How to Get HTTP Status Code
Jan 05, 2024 pm 06:08 PM
JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest
The relationship between js and vue
Mar 11, 2024 pm 05:21 PM
The relationship between js and vue: 1. JS as the cornerstone of Web development; 2. The rise of Vue.js as a front-end framework; 3. The complementary relationship between JS and Vue; 4. The practical application of JS and Vue.
