我想用this code裁剪上传的图像。
另外，我想限制图像的大小（以字节为单位）并将其保存为png格式。 当我不使用裁剪的图像时，可以使用以下代码获取图像长度：
var postedFile = Request.Files["FileUpload1"];
long length=postedFile.ContentLength;
我的问题是我无法正确获取裁剪后的图像长度。如果我在bytes.Length函数中使用Upload，它的长度将大于FileUpload控件中原始图像的长度。
如何获得png格式的裁剪图像长度？
我的代码如下：
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript" src="http://jcrop-
cdn.tapmodo.com/v0.9.8/js/jquery.Jcrop.js"></script>
<script type="text/javascript">
$(function () {
$('#FileUpload1').change(function () {
$('#Image1').hide();
var reader = new FileReader();
reader.onload = function (e) {
$('#Image1').show();
$('#Image1').attr("src", e.target.result);
$('#Image1').Jcrop({
onChange: SetCoordinates,
onSelect: SetCoordinates
});
}
reader.readAsDataURL($(this)[0].files[0]);
});
$('#btnCrop').click(function () {
var x1 = $('#imgX1').val();
var y1 = $('#imgY1').val();
var width = $('#imgWidth').val();
var height = $('#imgHeight').val();
var canvas = $("#canvas")[0];
var context = canvas.getContext('2d');
var img = new Image();
img.onload = function () {
canvas.height = height;
canvas.width = width;
context.drawImage(img, x1, y1, width, height, 0, 0, width, height);
$('#imgCropped').val(canvas.toDataURL());
$('[id*=btnUpload]').show();
};
img.src = $('#Image1').attr("src");
});
});
function SetCoordinates(c) {
$('#imgX1').val(c.x);
$('#imgY1').val(c.y);
$('#imgWidth').val(c.w);
$('#imgHeight').val(c.h);
$('#btnCrop').show();
};
</script>
<input type="file" id="FileUpload1" name="FileUpload1" />
<br />
<br />
<table border="0" cellpadding="0" cellspacing="5" style="text-align:right">
<tr >
<td>
<img id="Image1" alt="" style="display: none" />
<br />
<canvas id="canvas" height="5" width="5"></canvas>
</td>
</tr>
</table>
<br />
<input type="button" class="button" id="btnCrop" value="crop" style="display: none" />
<asp:Button ID="btnUpload" CssClass="button" runat="server" Text="upload" OnClick="Upload" Style="display: none" />
<input type="hidden" name="imgX1" id="imgX1" />
<input type="hidden" name="imgY1" id="imgY1" />
<input type="hidden" name="imgWidth" id="imgWidth" />
<input type="hidden" name="imgHeight" id="imgHeight" />
<input type="hidden" name="imgCropped" id="imgCropped" />
以及背后的代码：
var postedFile = Request.Files["FileUpload1"];
if (postedFile != null && postedFile.ContentLength > 0)
{
string filename = postedFile.FileName;
FileInfo fi = new FileInfo(filename);
string ext = fi.Extension;
if (ext != ".png")
{
lblMessage.Text = "please upload .png file";
return;
}
long length=postedFile.ContentLength;//this line return original length correctly
string base64 = Request.Form["imgCropped"];
byte[] bytes = Convert.FromBase64String(base64.Split(',')[1]);
int length= bytes.Length //get copped image length, but it greater than orig size
using (System.IO.FileStream stream = new System.IO.FileStream(path + "\\" + filename, System.IO.FileMode.Create))
{
stream.Write(bytes, 0, bytes.Length);
stream.Flush();
}
更新： 我尝试使用其他质量（1,0.95，...）以及png和jpeg格式的canvas.toDataURL（）并在选择整个图像时检查裁剪后的图像长度，但是该长度与原始图像不同。 （如果我在裁切后的图像中选择原始图像的75％像素，则希望获得原始长度的75％的长度。） 是什么原因？为获得与原始图像相同的质量，应设置质量和格式的值是什么？
答案 0 :(得分：0)
您的问题不是您得到的长度不正确，而是您要以比原始裁剪的图像更高的质量设置压缩裁剪的图像。
考虑为.toDataURL明确设置格式和质量选项
如果需要，可以使用与原始文件相同的设置，如果尺寸较小，则应该导致文件更小（除非可能是标头大小占主导的非常小的图像）。 / p>
默认类型为image/png，默认质量值为0.92，这可能是因为较小的图像（因为您将其裁剪了一点）可能具有的文件大小大于图像的大小的原因。未裁剪的原始图像；因为裁剪后的图像使用比源图像更高的质量设置进行编码。
例如，如果裁剪的数量导致裁剪后的图像占原始像素数量的 75％，但随后这些像素使用一种（平均） 2倍作为原始编码的字节数，则裁剪的文件将约为原始长度的150％。 我提供此示例来说明裁剪后的文件可能比未裁剪后的文件大。
canvas.toDataURL：canvas.toDataURL(type, encoderOptions);类型（可选），指示图像格式的DOMString。默认值 格式类型为image / png。
encoderOptions （可选）介于0之间的数字 和1表示要使用的图像格式的图像质量 有损压缩，例如image / jpeg和image / webp。如果这个说法 除此之外，将使用图像质量的默认值。的 默认值为0.92。其他参数将被忽略。