Обрезать изображение перед отправкой как DataURL

Question

У меня есть холст, который редактируется пользователем (некоторые вещи перетаскивания), и в нем есть инструкции, напечатанные в тексте на нем. Я хочу сохранить изображение без этого текста.

Я использую KeneticJS. Размер всегда будет таким же, а текст находится внизу изображения, поэтому я думал, могу ли я просто обрезать его, что будет работать нормально. Я передаю изображение как dataURL в мое решение, возможно ли обрезать изображение перед отправкой его в качестве URL-адреса данных?

Было бы здорово, если бы я мог просто сказать dataURL.crop (высота, ширина); или что-то.

Вот мой код, который при нажатии кнопки отправляет изображение в качестве URL-адреса данных для моего решения filemaker.

 bGroup.on('click touchstart', function(){ 
 
     stage.toDataURL({ 
 
      callback: function(dataUrl) { 
 
        var myParam = encodeURIComponent(dataUrl.split(',').pop()); 
 
        theURL = 'fmp://$/" & Get(FileName)& "?script=MoistureMap_Done&param=' + myParam; 
 
        window.location= theURL; 
 
        bDone.fill('green'); 
 
        buttonLayer.draw(); 
 
      }}); 
 
     
 
    });

Answer 1

Там нет прямого способа отсечения текста, но это не сложно:

1. Создать изображение из dataURL (или используйте переписывались изображение, если у вас есть доступ к нему).
2. Создайте новый холст в памяти: document.createElement ('canvas');
3. Измените размер холста на нужный размер: canvas.width = 10; canvas.height = 10;
4. Нарисуйте изображение с # 1 на холсте: context.drawImage
5. Текст в нижней части изображения будет автоматически обрезаться, так как холст в памяти меньше, чем входящее изображение.
6. Потяните dataurl в память холст: canvas.toDataURL