Создание новой страницы с помощью jsPDF портит вывод новых изображений - PullRequest
Новая
       19

Создание новой страницы с помощью jsPDF портит вывод новых изображений

0 голосов
/ 12 января 2019

Когда я пишу первую страницу с помощью jsPDF, она выводит изображения правильно, но после создания второй и последней страниц размер изображений искажается и не может быть установлен. Я проверил координаты, ширину и высоту, но они верны. Вот весь код, который я использую: 

 getBase64Image = (img) => {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    var dataURL = canvas.toDataURL("image/png");
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

saveAsPDF = () => {
var doc = new jsPDF();
let width = 100;
[...Array(this.chartTypes.length)].map((_, typeIdx) => {
  let chartType = this.chartTypes[typeIdx];
  doc.text(chartType, 20, 10);
  let x = 1;
  let y = 1;
  let urlArr = this.get_analysis_charts(chartType);
  urlArr.map((pathArr, chartIdx) => {
      let chartId = '#chart_' + typeIdx + '_' + chartIdx;
      let imgElem = d3.select(chartId).node();
      let ratio = imgElem.height / imgElem.width;
      let height = width*ratio;

      if (chartIdx % 2 === 0) {
        x = 1;
        y = 1;
        if (chartIdx > 0) {
          y = height + 1;
        } 
      } else {
        x = x + width + 1;
      } 

      let base64Img = this.getBase64Image(imgElem);
      doc.addImage(base64Img, 'PNG', x, y, width, height);
})
doc.addPage();
})
  doc.save('new_pdf.pdf');
}

Итак, я вижу, что первая страница корректно заполняется 4 изображениями, но на следующей странице есть обрезанные изображения, как будто они вообще не были изменены и не помещаются на странице. Я попытался установить ширину и высоту постоянными значениями, и это не помогает, поэтому проблема в другом месте.

Обновление

Оказывается, что другие страницы начинают работать только тогда, когда я добавляю функции getBase64Image 4*width и 4*height, но тогда изображения первых страниц начинают выглядеть крошечными. Итак, я думаю, это проблема рисования на холсте. Другие страницы хорошо работают со следующим кодом: 

getBase64Image = (img, width, height) => {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, width, height);
    var dataURL = canvas.toDataURL("image/png");
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
  }

А внутри saveAsPDF актуальны следующие две строки: 

let base64Img = this.getBase64Image(imgElem, 4*width, 4*height);
doc.addImage(base64Img, 'PNG', x, y, width, height);

С этим кодом первая страница генерируется неправильно. Хотя теперь я могу просто добавить if-else условие и исправить его, я понятия не имею, почему это происходит и как этого избежать.

Обновление

В какой-то момент возникла ошибка из ниоткуда, возможно, из-за некоторой проблемы с памятью браузера, трудно сказать:

Uncaught RangeError: Неверная длина строки

Когда pdf генерируется с doc.save().

...