在将图像发送到服务器之前缩小图像大小有问题吗?
在我们网站的某个部分,我们需要上传一张照片,我们希望零公里用户参与缩小照片,而这些东西是行不通的。发送到服务器的速度要提高,不然我想在服务器端减小音量是没有问题的
<asp:requiredfieldvalidator controltovalidate="FileUpload1" runat="server" id="RequiredFieldValidator6" errormessage="" validationgroup="j1" display="Dynamic" text="" setfocusonerror="True"></asp:requiredfieldvalidator>
<input type="button" value="برای انتخاب دوبار کلیک کنید" onclick="ResizeImage()" />
<asp:HiddenField ID="HiddenField1" runat="server" />
<img width="200" height="200" src="" runat="server" id="output">
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_OnClick" />
<script type="text/javascript">
function ResizeImage() {
if (window.File && window.FileReader && window.FileList && window.Blob) {
var file = document.getElementById('<%=FileUpload1.ClientID%>').files[0];
if (file) {
var reader = new FileReader();
// Set the image once loaded into file reader
reader.onload = function (e) {
var img = document.createElement("img");
img.src = e.target.result;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0);
var MAX_WIDTH = 300;
var MAX_HEIGHT = 300;
var width = img.width;
var height = img.height;
if (width > height) { if (width > MAX_WIDTH) { height *= MAX_WIDTH / width; width = MAX_WIDTH;
} } else { if (height > MAX_HEIGHT) { width *= MAX_HEIGHT / height; height = MAX_HEIGHT;
}
} canvas.width = width; canvas.height = height;
var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, width, height);
dataurl = canvas.toDataURL(file.type); document.getElementById('<% =HiddenField1.ClientID%>').value= document.getElementById('output').src = dataurl;
} reader.readAsDataURL(file);
}
} else {
alert('مرورگر شما چنین کدی را ساپورت نمی کند.');
}
}
</script>
int whith=300;
int height = 300;
byte[] image1;
try
{
image1 = Convert.FromBase64String(HiddenField1.Value.Replac e("data:image/jpeg;base64,", ""));
}
catch
{
image1 = Convert.FromBase64String(HiddenField1.Value.Replac e("data:image/png;base64,", ""));
}
using (MemoryStream mem = new MemoryStream(image1))
{
Stream stream = mem;
Bitmap image = new Bitmap(stream);
Bitmap target = new Bitmap(width, height);
Graphics graphic = Graphics.FromImage(target);
graphic.DrawImage(image, 0, 0, width, height); target.Save(Server.MapPath(@"~/up/" + FileUpload1.FileName));
}
In a part of our site, we need to upload a photo, and we want the zero-kilometer user to be involved in shrinking the photo, and these things do not work. The speed of sending to the server should be increased, otherwise if I want to reduce the volume on the server side, there is no problem
<asp:requiredfieldvalidator controltovalidate="FileUpload1" runat="server" id="RequiredFieldValidator6" errormessage="" validationgroup="j1" display="Dynamic" text="" setfocusonerror="True"></asp:requiredfieldvalidator>
<input type="button" value="برای انتخاب دوبار کلیک کنید" onclick="ResizeImage()" />
<asp:HiddenField ID="HiddenField1" runat="server" />
<img width="200" height="200" src="" runat="server" id="output">
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_OnClick" />
<script type="text/javascript">
function ResizeImage() {
if (window.File && window.FileReader && window.FileList && window.Blob) {
var file = document.getElementById('<%=FileUpload1.ClientID%>').files[0];
if (file) {
var reader = new FileReader();
// Set the image once loaded into file reader
reader.onload = function (e) {
var img = document.createElement("img");
img.src = e.target.result;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0);
var MAX_WIDTH = 300;
var MAX_HEIGHT = 300;
var width = img.width;
var height = img.height;
if (width > height) { if (width > MAX_WIDTH) { height *= MAX_WIDTH / width; width = MAX_WIDTH;
} } else { if (height > MAX_HEIGHT) { width *= MAX_HEIGHT / height; height = MAX_HEIGHT;
}
} canvas.width = width; canvas.height = height;
var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, width, height);
dataurl = canvas.toDataURL(file.type); document.getElementById('<% =HiddenField1.ClientID%>').value= document.getElementById('output').src = dataurl;
} reader.readAsDataURL(file);
}
} else {
alert('مرورگر شما چنین کدی را ساپورت نمی کند.');
}
}
</script>
int whith=300;
int height = 300;
byte[] image1;
try
{
image1 = Convert.FromBase64String(HiddenField1.Value.Replac e("data:image/jpeg;base64,", ""));
}
catch
{
image1 = Convert.FromBase64String(HiddenField1.Value.Replac e("data:image/png;base64,", ""));
}
using (MemoryStream mem = new MemoryStream(image1))
{
Stream stream = mem;
Bitmap image = new Bitmap(stream);
Bitmap target = new Bitmap(width, height);
Graphics graphic = Graphics.FromImage(target);
graphic.DrawImage(image, 0, 0, width, height); target.Save(Server.MapPath(@"~/up/" + FileUpload1.FileName));
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论