Как обрезать неиспользуемое пространство холста из сохраненного образа base64?

Question

Есть ли способ обрезать изображение base64 перед сохранением?

• В настоящее время я использую html5 холст, чтобы создать изображение.
• Весь холст сохранен, что неэффективно.
• Холст изменчивый, и я хотел бы узнать, можно ли обрезать неиспользуемые прозрачные пиксели из сохраненного изображения.

---

JAVASCRIPT (Jquery)

var wrapper = document.getElementById('Pad'), 
    save = wrapper.querySelector('[data-btn=save]'), 
    canvas = wrapper.querySelector('canvas'), 
    pad = new SignaturePad(canvas); 

function resizeCanvas() { 
    var ratio = window.devicePixelRatio || 1; 
    canvas.width = canvas.offsetWidth * ratio; 
    canvas.height = canvas.offsetHeight * ratio; 
    canvas.getContext("2d").scale(ratio, ratio); 
} 

window.onresize = resizeCanvas; 
resizeCanvas(); 

Холст сохранить в dataUrl функции:

save.addEventListener('click', function (event) { 
    var dataUrl = canvas.toDataURL(); 
    $('txtbx').val(dataUrl); 
}); 

Answer 1

Да, вот один из способов:

• Используйте context.getImageData для получения матрицы пикселей RGBA на холсте.

• Примечание: прозрачные пиксели имеют значение альфа-матрицы == 0;

• Изучите каждую строку пикселей сверху вниз и получите первую непрозрачную строку (var top);

• Изучите каждую строку пикселей снизу вверх и получите первую непрозрачную строку (дно var);

• Изучите каждый столбец пикселей слева и получите первый непрозрачный столбец (слева);

• Изучите каждый столбец пикселей из правого левого и получите первый непрозрачный столбец (var right);

• Создать холст и размер в памяти его, используя вычисленные значения:

  var width=right-left; 
  var height=bottom-top; 
  
  var canvas1=document.createElement('canvas'); 
  canvas1.width=width; 
  canvas1.height=height; 
  

• Нарисовать только непрозрачные пиксели на холсте в памяти

  var ctx1=canvas1.getContext('2d'); 
  
  // clip just the non-transparent pixels and draw them to the in-memory canvas 
  ctx1.drawImage(yourOnScreeCanvas, left,top,width,height, 0,0,width,height); 
  

• Сохранить в памяти.

Answer 2

попробовать https://gist.github.com/remy/784508

Он находит пустые пиксели и в зависимости от их положения, он обрезает изображение