裁剪圖像ASP.NET Web表單-無法呈現保存的字節

Question

這里是詳細信息：技術：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">&times;</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 [] bytes = 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" />

我想念什么？ 請幫忙！！！

Answer 1

弄清楚了。 發生了什么事

canvas.toDataURL('image/jpeg')

在內容中放入“ data：image / jpeg; base64”。 因此，要解決此問題，我要做的是用空字符串替換“ data：image / jpeg; base64”，也就是在保存到數據庫之前刪除此字符串。