Question

У меня есть html5 холст (3000px x 3000px). Я использую следующую функцию для печати на холсте:

function printCanvas() 
{ 
    popup = window.open(); 
    popup.document.write("<br> <img src='"+canvas.toDataURL('png')+"'/>"); 
    popup.print(); 
} 

Проблема заключается в том, если у меня есть только элемент на холсте (скажем круг) и нажмите кнопку печати, он будет пытаться распечатать весь холст (3000 х 3000). Есть ли способ изменить его, чтобы он печатал только определенный участок холста или только ту часть, где есть элементы, а не печатать пустое пространство.

Спасибо.

Answer 1

Другой ответ описывает правильный подход. Основная проблема заключается в том, чтобы найти границы. Я получаю все данные изображения и два для петель найти границы:

function getCanvasBorders(canvas) { 
    var topleft = {x: false, y: false}; 
    var botright = {x: false, y: false}; 

    for(var x = 0; x < canvas.width; x++) { 
    for(var y = 0; y < canvas.height; y++) { 
     if(!emptyPixel(context, x, y)) { 
     if(topleft.x === false || x < topleft.x) { 
      topleft.x = x; 
     } 
     if(topleft.y === false || y < topleft.y) { 
      topleft.y = y; 
     } 
     if(botright.x === false || x > botright.x) { 
      botright.x = x; 
     } 
     if(botright.y === false || y > botright.y) { 
      botright.y = y; 
     } 
     } 
    } 
    } 

    return {topleft: topleft, botright: botright}; 
} 

SO фрагменты не могут работать с document, так вот jsfiddle.

Answer 2

Предполагая, что у вас есть возможность отслеживать и перерисовки объектов, вы можете сделать следующее:

1. Вычислить максимальные пределы, которые могут содержать все объекты
2. Создать новый холст размер, что оценка
3. Рисование в области, связанной с помощью drawImage() с ее параметрами отсечения, но смещением -x и -y связанной начальной позиции.

Вместо этого напечатайте временный холст.

Обновление: только для поиска краев содержимого изображения, при условии прозрачности для фона, см. this answer.