FabricJS - Возможность выводить (в PNG) небольшой раздел холста, а не весь холст - PullRequest
Новая
       19

FabricJS - Возможность выводить (в PNG) небольшой раздел холста, а не весь холст

0 голосов
/ 07 июня 2018

Я был бы очень признателен за обратную связь и помощь с FabricJS.

У меня есть ограничивающая область пикселей размером 500 x 500 пикселей (определяется пунктирной линией) в пределах более крупного холста размером 600 x 600 пикселей.

ОднакоЯ хочу выводить в PNG только небольшой раздел внутри пунктирной области, а не весь холст.Это важно, поскольку пользователь должен иметь возможность изменять размер ограничивающей области для своих выходных данных (например, размер рекламы в Facebook [1200px], размер визитной карточки [??? px] и т. Д.), НО размер холста останется прежним.

На выходе мне нужен только PNG с меньшей ограниченной областью.

Возможно ли это с FabricJS?

Я нашел скрипку, чтобы показать вамчто я имею в виду: http://jsfiddle.net/prabhath/92jy8q52/

canvas.setBackgroundImage(clipingRect);

Моя другая мысль заключалась в создании меньшего холста внутри большего холста, но из того, что я видел в Интернете, ограничивающие элементы управления не видны в областях за пределами холста,Мне еще предстоит исследовать внутреннюю / внешнюю канву, но я не уверен, будет ли это соответствовать моим потребностям.

Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 07 июня 2018

Спасибо @Durga, это сработало.

Я немного подкорректировал код, чтобы удовлетворить свои потребности.Вот моя последняя функция: 

$scope.saveCanvas2ClippedPNG = function(multiplier) {

  var clipdCanvas = canvas.toDataURL({
    multiplier: multiplier,
    format: 'png',
    left: 100,     //clipingRect.left
    top: 100,      //clipingRect.top
    width: 1000,   //clipingRect.width
    height: 428    //clipingRect.height
  });

  var byteString = atob(clipdCanvas.split(',')[1]);
  var mimeString = clipdCanvas.split(',')[0].split(':')[1].split(';')[0]
  var ab = new ArrayBuffer(byteString.length);
  var ia = new Uint8Array(ab);

  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }

  var blob = new Blob([ab], {type: mimeString});

  saveAs(blob, "robClipdImage.png");

};
0 голосов
/ 07 июня 2018 
canvas.toDataURL({
  left: clipingRect.left,
  top: clipingRect.top,
  width: clipingRect.width,
  height: clipingRect.height
});

Вы можете использовать canvas.toDataURL () с параметрами для получения раздела холста.

...