根据图像的宽度和高度设置pdf宽度和高度

Question

I want to set the PDF width and height equal to the image width and height. But the image width and height is coming as 0.

I also used image.onload() but that is not getting called.

This is HTML:

<span class="col-sm-3 padding0">
    <button id="downloadModel" class="btn btn-md btn-default"
            style="height:100px;width: 210px" 
            ng-click="downloadWorkModel()">
          Download Work Model
    </button>
</span>

CODE:

$scope.downloadWorkModel= function(){
  var image = new Image();
  image.src = 'data:image/png;base64,'+$scope.workData.image;
  document.body.appendChild(image);
  console.log("image width: "+image.width); //coming 0
  console.log("image height: "+image.height); //coming 0
  var pdf = new jsPDF("l", "mm");
  pdf.addImage(image, 'png', 0, 0);
  pdf.save('workModel.pdf');
};

NOTE:

This doesn't work either (it doesn't goes inside onload)-

$scope.downloadWorkModel= function(){
    var image = new Image();
    var width, height;
    image.onload = function() {
        width= this.width;
        height= this.height;
    };
    image.src = 'data:image/png;base64,'+$scope.workData.image;
    document.body.appendChild(image);
    console.log("image width: "+image.width); //coming 0
    console.log("image height: "+image.height); //coming 0
    var pdf = new jsPDF("l", "mm", [width, height]);
    pdf.addImage(image, 'png', 0, 0);
    pdf.save('workModel.pdf');
};

@mplungjan-

After putting your code the download pdf content becomes too small to view-

Answer 1

Try this. The load is async enough to not show the size until after the load

$scope.downloadWorkModel = function() {
  var image = new Image();
  var width, height;
  image.onload = function() {
    width = this.width;
    height = this.height;
    document.body.appendChild(this);
    console.log("image width: " + width);
    console.log("image height: " +height);
    var pdf = new jsPDF("l", "mm", [width, height]);
    pdf.addImage(this, 'png', 0, 0);
    if (done) {  // something needs to decide when this is true
      pdf.save('workModel.pdf'); 
    }
  };
  image.src = 'data:image/png;base64,' + $scope.workData.image;
};

Answer 2

$scope.downloadWorkModel= function(){
      let image = new Image();
      let width, height;
      image.src = 'data:image/png;base64,'+$scope.workData.image;
      let addedImage = document.body.appendChild(image);
      width = addedImage.width;
      height = addedImage.height;
      console.log("image width: "+width); //coming 0
      console.log("image height: "+height); //coming 0
      var pdf = new jsPDF("l", "mm", [width, height]);
      pdf.addImage(image, 'png', 0, 0);
      pdf.save('workModel.pdf');
    };