根據圖像的寬度和高度設置pdf寬度和高度

Question

我想將PDF的寬度和高度設置為等於圖像的寬度和高度。 但是圖像的寬度和高度為0。

我也使用了image.onload()但是沒有被調用。

這是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>

碼：

$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');
};

注意：

這也不起作用（它也不在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-

輸入代碼后，下載的pdf內容變得太小而無法查看-

Answer 1

嘗試這個。 加載是異步的，直到加載后才顯示大小

$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');
    };