Холст, в который я хотел бы загрузить строку Base64, которая представляет png-изображение, но просто отображает пустой белый квадрат

Question

У меня есть холст, в который я хотел бы загрузить строку Base64, представляющую png-изображение. Однако следующий код просто отображает пустой белый ящик, и я не понимаю, почему. Когда я смотрю на данные на холсте, он выглядит идентично холсту, который получает свои данные из объекта FileReader (также ниже). Любая помощь, которая выдает эту проблему, очень ценится!

Этот код показывает белый холст:

HTML

 <canvas id="canvas" width="114" height="114" style="z-index: 999999; display: none; padding-left: 50px"></canvas> 

Javascript

 var websiteIconData = $('#ctl00_ContentPlaceHolder1_websiteIcon'); 
     if (websiteIconData.val() != '') { 
      var canvas = document.getElementById('canvas'); 
      var ctx = document.getElementById('canvas').getContext('2d'); 
      var loadedImg = new Image(); 
      loadedImg.onload = function() { 
       ctx.drawImage(this, 0, 0); 
       Debugger.log(ctx); 
      }; 
      loadedImg.src = websiteIconData.val(); 
      canvas.style.display = 'block'; 
     } 

Этот код показывает изображение:

 $('#loadWebsiteIcon').on({ 
      change: function (ev) { 
       var reader = new FileReader(); 
       reader.onload = function (e) { 
        function draw() { 
         var ctx = document.getElementById('canvas').getContext('2d'); 
         var img = new Image(); 
         img.onload = function() { 
          var MAX_WIDTH = 114; 
          var MAX_HEIGHT = 114; 
          var width = img.width; 
          var height = img.height; 
          if (width > MAX_WIDTH) { 
           width = MAX_WIDTH; 
          } 
          if (height > MAX_HEIGHT) { 
           height = MAX_HEIGHT; 
          } 
          ctx.drawImage(img, 0, 0, width, height); 
          for (var i = 0; i <= document.images.length; i++) { 
          } 
          Debugger.log(ctx); 
         }; 
         img.src = e.target.result; 
        } 
        draw(); 
       }; 
       reader.readAsDataURL(ev.target.files[0]); 
       var canvas = document.getElementById('canvas'); 
       canvas.style.display = 'block'; 
       var imgData = canvas.toDataURL(); 
       $('#ctl00_ContentPlaceHolder1_websiteIcon').val(imgData); 
       Debugger.log(imgData); 
      } 
     }); 

Answer 1

Будьте осторожны, как Base64 парсится , Если он разобран по электронной почте, он по умолчанию добавит персонаж из 76 строк. Большинство кодеров Base64 имеют возможность отключить это. Я смотрю на MIME::Base64

Из этого документа:

Возвращается кодированная строка разбивается на строки не более 76 символов в каждой, и> будет заканчиваться $ EOL, если он не пуст.

где $ eol был одним из аргументов. В случае этого модуля установка его в пустую строку предотвратит разбиение базы64.

Answer 2

Оказалось, что проблема имеет мало общего с API холста или кодировкой Base64. Это была больше проблема с canvas.toDataURL(); вызов функции, вызванный до того, как изображение было загружено в холст. Перемещение этой линии в функцию img.onload показалось, что это трюк. Ниже приведен правильный код:

function initImageChange() { 
//this is will be a string in Base64, in this case it is an <input type="text">... tag 
     var imageData = $('#imageData'); 
//this is a canvas tag in on the page 
     var canvas = document.getElementById('canvas'); 
//load the image from the imageData var if it exists 
     if (imageData.val() != '') { 
      var ctx2=canvas.getContext('2d'); 
      var loadedImg = new Image(); 
      loadedImg.onload = function() { 
       ctx2.drawImage(this, 0, 0); 
      }; 
      loadedImg.src = imageData.val(); 
      canvas.style.display = 'block'; 
     } 
//this is a function that loads an image from a file onto the canvas and 
//sends the Base64 representation of this image to the text input tag. This 
//could fairly easily be send directly to a post request or saved some other way 
     $('#loadImage').on({ 
      change: function (ev) { 
       var ctx = document.getElementById('canvas').getContext('2d'); 
       var dataURL = ''; 
       var reader = new FileReader(); 
       reader.onload = function (e) { 
        ctx.clearRect(0, 0, canvas.width, canvas.height); 
        function draw() { 
         var img = new Image(); 
         img.onload = function() { 
          var MAX_WIDTH = 130; 
          var MAX_HEIGHT = 110; 
          var width = img.width; 
          var height = img.height; 
          if (width > MAX_WIDTH) { 
           width = MAX_WIDTH; 
          } 
          if (height > MAX_HEIGHT) { 
           height = MAX_HEIGHT; 
          } 
          ctx.drawImage(img, 0, 0, width, height); 
          dataURL = canvas.toDataURL(); 
          $('#ctl00_ContentPlaceHolder1_websiteIcon').val(dataURL); 
          ctx.restore(); 
         }; 
         img.src = e.target.result; 

        } 
        draw(); 
       }; 
       reader.readAsDataURL(ev.target.files[0]); 
       canvas.style.display = 'block'; 
      } 
     }); 
    }