上传后裁剪图像
[英]crop image after uploading
问题描述
这是我的图像上传代码，现在我想裁剪所选图像。
请帮助我裁剪选定的图像。
我的最大裁切尺寸为145X190像素
我上传图片的代码是
这个：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Tooltip - Default functionality</title>
<script src="http://deepliquid.com/projects/Jcrop/js/jquery.min.js"></script>
<script src="http://deepliquid.com/projects/Jcrop/js/jquery.Jcrop.js"></script>
<link rel="stylesheet" href="http://deepliquid.com/projects/Jcrop/css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="http://deepliquid.com/projects/Jcrop/demos/demo_files/demos.css" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script >
$(function () {
function readImage(file) {
var reader = new FileReader();
var image = new Image();
var maxw = 600;
var maxh = 600;
reader.readAsDataURL(file);
reader.onload = function (_file) {
image.src = _file.target.result; // url.createObjectURL(file);
image.onload = function () {
var w = this.width,
h = this.height,
t = file.type, // ext only: // file.type.split('/')[1],
n = file.name,
s = ~~ (file.size / 1024) + 'KB';
if ( h > maxh || w > maxw) {
alert("Height and width is bigger then over max criteria pls select image max height and width =2024X2024");
alert(w);
alert(h);
} else {
alert(w);
alert(h);
$('#uploadPreview').html('<img src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>');
}
};
image.onerror = function () {
alert('Invalid file type: ' + file.type);
};
};
}
$("#choose").change(function (e) {
if (this.disabled) return alert('File upload not supported!');
var F = this.files;
if (F && F[0]) for (var i = 0; i < F.length; i++) readImage(F[i]);
});
$(function(){
$('image.src').Jcrop({
onChange: showPreview,
onSelect: showPreview,
aspectRatio: 1
});
});
function showPreview(coords)
{
var rx = 100 / coords.w;
var ry = 100 / coords.h;
$('#uploadPreview1').css({
width: Math.round(rx * 500) + 'px',
height: Math.round(ry * 370) + 'px',
marginLeft: '-' + Math.round(rx * coords.x) + 'px',
marginTop: '-' + Math.round(ry * coords.y) + 'px'
});
}
});
</script>
<style>
</style>
</head>
<body >
<input type="file" id="choose" multiple="multiple" />
<br>
<div id="uploadPreview" ></div>
<div id="uploadPreview1" ></div>
</body>
</html>
现在我要裁剪图像。希望您理解我的代码。
2 个解决方案
解决方案1
0 2013-12-16 12:41:25
虽然我不了解您的完整代码，但是您似乎尚未实现裁剪功能。 如果我错了，请纠正我。 但是要实现裁剪，您可以使用JQuery中的Jcrop插件。
让我知道我是否误解了您的查询。
解决方案2
0 已采纳 2013-12-16 13:29:21
您已经导入了jquery.min，因此不必导入“ jquery-1.9.1.js”。 除此之外，也许您需要在创建图片标签后立即调用Jcrop。 我对您的代码进行了修改，因此可以裁剪上载的图像。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Tooltip - Default functionality</title>
<script src="http://deepliquid.com/projects/Jcrop/js/jquery.min.js"></script>
<script src="http://deepliquid.com/projects/Jcrop/js/jquery.Jcrop.js"></script>
<link rel="stylesheet" href="http://deepliquid.com/projects/Jcrop/css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="http://deepliquid.com/projects/Jcrop/demos/demo_files/demos.css" type="text/css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script >
$(function () {
function readImage(file) {
var reader = new FileReader();
var image = new Image();
var maxw = 600;
var maxh = 600;
reader.readAsDataURL(file);
reader.onload = function (_file) {
image.src = _file.target.result; // url.createObjectURL(file);
image.onload = function () {
var w = this.width,
h = this.height,
t = file.type, // ext only: // file.type.split('/')[1],
n = file.name,
s = ~~ (file.size / 1024) + 'KB';
if ( h > maxh || w > maxw) {
alert("Height and width is bigger then over max criteria pls select image max height and width =2024X2024");
alert(w);
alert(h);
} else {
alert(w);
alert(h);
$('#uploadPreview').html('<img id="myImage" src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>');
$('#myImage').Jcrop({
onChange: showPreview,
onSelect: showPreview,
aspectRatio: 1
});
}
};
image.onerror = function () {
alert('Invalid file type: ' + file.type);
};
};
}
$("#choose").change(function (e) {
if (this.disabled) return alert('File upload not supported!');
var F = this.files;
if (F && F[0]) for (var i = 0; i < F.length; i++) readImage(F[i]);
});
function showPreview(coords)
{
var rx = 100 / coords.w;
var ry = 100 / coords.h;
$('#uploadPreview1').css({
width: Math.round(rx * 500) + 'px',
height: Math.round(ry * 370) + 'px',
marginLeft: '-' + Math.round(rx * coords.x) + 'px',
marginTop: '-' + Math.round(ry * coords.y) + 'px'
});
}
});
</script>
<style>
</style>
</head>
<body >
<input type="file" id="choose" multiple="multiple" />
<br>
<div id="uploadPreview" ></div>
<div id="uploadPreview1" ></div>
</body>
</html>
React Image-crop 显示错误，因为它没有以正确的形式上传图像并且从后端收到错误
[英]React Image-crop showing error as it is not uploading the image in the proper form and is getting an error from the backend
使用React Native和Image Crop Picker同时上传到存储和数据库时，Firebase错误代码403
[英]Firebase error code 403 when uploading to storage and database at the same time using React Native and Image Crop Picker
即使使用js压缩后，图像上传也太慢（使用php上传）
[英]image uploading is too slow even after compress with js (uploading with php)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.