以下是详细信息： 技术：asp.net Web表单（C＃） 目标：允许用户上传图片并对其进行裁剪 我正在通过jQuery使用cropper.js 代码：
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:PostBackTrigger ControlID="UploadFile" />
</Triggers>
<ContentTemplate>
<div class="container">
<label class="label" data-toggle="tooltip" title="Change your avatar">
<img class="pic-circle" id="imgProfileAvatar" runat="server" alt="avatar" />
<input type="file" class="sr-only" id="input" name="image" accept="image/*" />
</label>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>
<div class="alert" role="alert"></div>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLabel">Crop the image</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="img-container">
<img id="imageToCrop" runat="server" />
<img id="imgCropped" runat="server" />
<asp:Button ID="UploadFile" runat="server" Text="Upload" OnClick="UploadFile_Click" Style="visibility: hidden;"/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="crop">Crop</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<script>
window.addEventListener('DOMContentLoaded', function () {
var avatar = document.getElementById('<%=imgProfileAvatar.ClientID%>');
var image = document.getElementById('<%=imageToCrop.ClientID%>');
var input = document.getElementById('input');
var $progress = $('.progress');
var $progressBar = $('.progress-bar');
var $alert = $('.alert');
var $modal = $('#modal');
var cropper;
$('[data-toggle="tooltip"]').tooltip();
input.addEventListener('change', function (e) {
var files = e.target.files;
var done = function (url) {
input.value = '';
image.src = url;
$alert.hide();
$modal.modal('show');
};
var reader;
var file;
var url;
if (files && files.length > 0) {
file = files[0];
if (URL) {
done(URL.createObjectURL(file));
} else if (FileReader) {
reader = new FileReader();
reader.onload = function (e) {
done(reader.result);
};
reader.readAsDataURL(file);
}
}
});
$modal.on('shown.bs.modal', function () {
cropper = new Cropper(image, {
aspectRatio: 1,
viewMode: 3,
});
}).on('hidden.bs.modal', function () {
cropper.destroy();
cropper = null;
});
document.getElementById('crop').addEventListener('click', function () {
var initialAvatarURL;
var canvas;
$modal.modal('hide');
if (cropper) {
canvas = cropper.getCroppedCanvas({
width: 160,
height: 160,
});
initialAvatarURL = avatar.src;
avatar.src = canvas.toDataURL();
$progress.show();
$alert.removeClass('alert-success alert-warning');
//var formData = new FormData();
var data = "{studentIdStr: '<%: this.StudentId %>', imageEncodeString: '" + canvas.toDataURL('image/jpeg') + "'}";
<%--formData.append('avatar', blob);
formData.append('studentIdStr', '<%: this.StudentId %>');--%>
//console.log(JSON.stringify(data));
$.ajax('<%= ResolveUrl("~/Dashboard/Profile.aspx/UploadProfilePic") %>', {
method: 'POST',
data: data,
contentType: "application/json; charset=utf-8",
success: function () {
$alert.show().addClass('alert-success').text('Upload success');
},
error: function () {
avatar.src = initialAvatarURL;
$alert.show().addClass('alert-warning').text('Upload error');
},
complete: function () {
$progress.hide();
},
});
// canvas.toBlob(function (blob) {
//});
}
});
});
</script>
</ContentTemplate>
</asp:UpdatePanel>
用户点击裁剪时被调用的代码背后的代码：
byte []个字节= System.Text.Encoding.ASCII.GetBytes（imageEncodeString）; attachmentDTO.Content =字节; // SQL Server数据类型为varbinary（max）
当我最初选择图像并将其上传时，这非常有用。裁剪也很好。储蓄也是如此。 问题是，当我尝试从数据库中重新绘制裁剪的图像时，它不显示任何内容（默认图像丢失图标）。这是关于如何从数据库获取图像并将其返回到UI的代码
var theImage = imageContentRow.Content; //todo:
imgProfileAvatar.Src = "data:image/jpeg;base64," + Convert.ToBase64String(theImage);
以及该图片的显示控件
<img class="pic-circle" id="imgProfileAvatar" runat="server" alt="avatar" />
我想念什么？请帮忙!!!
答案 0 :(得分：0)
弄清楚了。 发生了什么事
canvas.toDataURL('image/jpeg')
在内容中放入“ data：image / jpeg; base64”。因此，要解决此问题，我要做的是用空字符串替换“ data：image / jpeg; base64”，也就是在保存到数据库之前删除此字符串。