裁剪图片并使用 php 上传
Crop Image and upload with php
我有一个裁剪图像脚本。当用户单击保存按钮时,脚本如何上传裁剪后的图像?如何制作 PHP 裁剪后的图片并上传到服务器?
文档位于 github - cropperjs。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Cropper.js</title>
<!-- <link rel="stylesheet" href="dist/cropper.css"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.css" />
<style>
.container {
max-width: 640px;
margin: 20px auto;
}
img {
max-width: 100%;
}
</style>
</head>
<body>
<div class="container">
<h1>Cropper with a range of aspect ratio</h1>
<div>
<img id="image" src="https://fengyuanchen.github.io/cropperjs/images/picture.jpg" alt="Picture">
</div>
<button onclick="cropper.getCroppedCanvas()">Save</button>
</div>
<!-- <script src="dist/cropper.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.js"></script>
<script>
window.addEventListener('DOMContentLoaded', function () {
var image = document.querySelector('#image');
var minAspectRatio = 1.0;
var maxAspectRatio = 1.0;
var cropper = new Cropper(image, {
ready: function () {
var cropper = this.cropper;
var containerData = cropper.getContainerData();
var cropBoxData = cropper.getCropBoxData();
var aspectRatio = cropBoxData.width / cropBoxData.height;
var newCropBoxWidth;
if (aspectRatio < minAspectRatio || aspectRatio > maxAspectRatio) {
newCropBoxWidth = cropBoxData.height * ((minAspectRatio + maxAspectRatio) / 2);
cropper.setCropBoxData({
left: (containerData.width - newCropBoxWidth) / 2,
width: newCropBoxWidth
});
}
},
cropmove: function () {
var cropper = this.cropper;
var cropBoxData = cropper.getCropBoxData();
var aspectRatio = cropBoxData.width / cropBoxData.height;
if (aspectRatio < minAspectRatio) {
cropper.setCropBoxData({
width: cropBoxData.height * minAspectRatio
});
} else if (aspectRatio > maxAspectRatio) {
cropper.setCropBoxData({
width: cropBoxData.height * maxAspectRatio
});
}
}
});
});
</script>
<!-- FULL DOCUMENTATION ON https://github.com/fengyuanchen/cropperjs -->
<!-- My question is: How do i get the cropped image and upload via php ? -->
</body>
</html>
how to crop and upload when click save button? , How to make the php get the cropped image and upload to server?
在 the readme, the description of method getCroppedCanvas()
中提到上传裁剪后的图片:
After then, you can display the canvas as an image directly, or use HTMLCanvasElement.toDataURL to get a Data URL, or use HTMLCanvasElement.toBlob to get a blob and upload it to server with FormData if the browser supports these APIs.1
cropper.getCroppedCanvas().toBlob(function (blob) {
var formData = new FormData();
formData.append('croppedImage', blob);
// Use `jQuery.ajax` method
$.ajax('/path/to/upload', {
method: "POST",
data: formData,
processData: false,
contentType: false,
success: function () {
console.log('Upload success');
},
error: function () {
console.log('Upload error');
}
});
});
因此对于您的示例,标记为 save 的按钮引用了 cropper 但这仅在 [=46= 的回调中定义]-加载回调(即 window.addEventListener('DOMContentLoaded', function () {
)。我建议使用事件委托(请参阅下面提到的示例 plunker),但如果您想引用 cropper,则需要在 DOM 加载的回调之外声明。
var cropper;
window.addEventListener('DOMContentLoaded', function () {
//assign cropper:
cropper = new Cropper(image, { ...
您可以在 this plunker. It utilizes a PHP code that merely takes the uploaded cropped image and returns the base64 encoded version (using base64_encode()) 中看到它的实际效果。
下面列出了 plunker 示例中使用的 PHP 代码:
<?php
$output = array();
if(isset($_FILES) && is_array($_FILES) && count($_FILES)) {
$output['FILES'] = $_FILES;
//this is where the cropped image could be saved on the server
$output['uploaded'] = base64_encode(file_get_contents($_FILES['croppedImage']['tmp_name']));
}
header('Content-Type: application/json');
echo json_encode($output);
不只是回显文件的 base64 编码版本,move_uploaded_file() 可用于上传文件,然后 return 有关上传文件的信息(例如文件 ID、路径等) ).
move_uploaded_file($_FILES['croppedImage']['tmp_name'], '/path/to/save/cropped/image');
1(https://github.com/fengyuanchen/cropperjs#user-content-getcroppedcanvasoptions)
我有一个裁剪图像脚本。当用户单击保存按钮时,脚本如何上传裁剪后的图像?如何制作 PHP 裁剪后的图片并上传到服务器?
文档位于 github - cropperjs。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Cropper.js</title>
<!-- <link rel="stylesheet" href="dist/cropper.css"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.css" />
<style>
.container {
max-width: 640px;
margin: 20px auto;
}
img {
max-width: 100%;
}
</style>
</head>
<body>
<div class="container">
<h1>Cropper with a range of aspect ratio</h1>
<div>
<img id="image" src="https://fengyuanchen.github.io/cropperjs/images/picture.jpg" alt="Picture">
</div>
<button onclick="cropper.getCroppedCanvas()">Save</button>
</div>
<!-- <script src="dist/cropper.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.js"></script>
<script>
window.addEventListener('DOMContentLoaded', function () {
var image = document.querySelector('#image');
var minAspectRatio = 1.0;
var maxAspectRatio = 1.0;
var cropper = new Cropper(image, {
ready: function () {
var cropper = this.cropper;
var containerData = cropper.getContainerData();
var cropBoxData = cropper.getCropBoxData();
var aspectRatio = cropBoxData.width / cropBoxData.height;
var newCropBoxWidth;
if (aspectRatio < minAspectRatio || aspectRatio > maxAspectRatio) {
newCropBoxWidth = cropBoxData.height * ((minAspectRatio + maxAspectRatio) / 2);
cropper.setCropBoxData({
left: (containerData.width - newCropBoxWidth) / 2,
width: newCropBoxWidth
});
}
},
cropmove: function () {
var cropper = this.cropper;
var cropBoxData = cropper.getCropBoxData();
var aspectRatio = cropBoxData.width / cropBoxData.height;
if (aspectRatio < minAspectRatio) {
cropper.setCropBoxData({
width: cropBoxData.height * minAspectRatio
});
} else if (aspectRatio > maxAspectRatio) {
cropper.setCropBoxData({
width: cropBoxData.height * maxAspectRatio
});
}
}
});
});
</script>
<!-- FULL DOCUMENTATION ON https://github.com/fengyuanchen/cropperjs -->
<!-- My question is: How do i get the cropped image and upload via php ? -->
</body>
</html>
how to crop and upload when click save button? , How to make the php get the cropped image and upload to server?
在 the readme, the description of method getCroppedCanvas()
中提到上传裁剪后的图片:
After then, you can display the canvas as an image directly, or use HTMLCanvasElement.toDataURL to get a Data URL, or use HTMLCanvasElement.toBlob to get a blob and upload it to server with FormData if the browser supports these APIs.1
cropper.getCroppedCanvas().toBlob(function (blob) { var formData = new FormData(); formData.append('croppedImage', blob); // Use `jQuery.ajax` method $.ajax('/path/to/upload', { method: "POST", data: formData, processData: false, contentType: false, success: function () { console.log('Upload success'); }, error: function () { console.log('Upload error'); } }); });
因此对于您的示例,标记为 save 的按钮引用了 cropper 但这仅在 [=46= 的回调中定义]-加载回调(即 window.addEventListener('DOMContentLoaded', function () {
)。我建议使用事件委托(请参阅下面提到的示例 plunker),但如果您想引用 cropper,则需要在 DOM 加载的回调之外声明。
var cropper;
window.addEventListener('DOMContentLoaded', function () {
//assign cropper:
cropper = new Cropper(image, { ...
您可以在 this plunker. It utilizes a PHP code that merely takes the uploaded cropped image and returns the base64 encoded version (using base64_encode()) 中看到它的实际效果。
下面列出了 plunker 示例中使用的 PHP 代码:
<?php
$output = array();
if(isset($_FILES) && is_array($_FILES) && count($_FILES)) {
$output['FILES'] = $_FILES;
//this is where the cropped image could be saved on the server
$output['uploaded'] = base64_encode(file_get_contents($_FILES['croppedImage']['tmp_name']));
}
header('Content-Type: application/json');
echo json_encode($output);
不只是回显文件的 base64 编码版本,move_uploaded_file() 可用于上传文件,然后 return 有关上传文件的信息(例如文件 ID、路径等) ).
move_uploaded_file($_FILES['croppedImage']['tmp_name'], '/path/to/save/cropped/image');
1(https://github.com/fengyuanchen/cropperjs#user-content-getcroppedcanvasoptions)