畫布圖像不顯示在

頁

的負載我有這個HTML + angularJS代碼：畫布圖像不顯示在

<li id="imageLi"> 
    <label id="imageLabel" class="imageLabel">Image</label> 
    <div class="inputImageDiv"> 
     <div id="voucherImageContainerDiv"> 
      <img id="voucherImage" ng-src="{{voucherModel.voucher.image.url}}"/> 
      <canvas id="voucherImageCanvas"></canvas> 
     </div> 
     <button ng-click="voucherModel.rotateVoucher()" class="voucherRotateBtn"><img src="img/rotate_image.svg" class="voucherRotateBtnImage"></button> 
     <input class="imageSelector clearLeft" type="file" ng-file-select="voucherModel.onVoucherImageSelect($files)"> 
    </div> 
</li>

它允許通話的圖像，然後將其調入畫布，以能夠旋轉點擊按鈕時圖像。

現在我有這個JS代碼，調整大小和縮放圖像：

var drawVoucherImage = function() { 
     voucherImage.onload = function() { 
      voucherImage.style.display = 'block'; 
      voucherImageWidth = voucherImage.width; 
      voucherImageHeight = voucherImage.height; 
      voucherImage.style.display = 'none'; 
      var maxSize = (imageLi.clientWidth - imageLabel.clientWidth) * 9/10; 
      var imageSize = Math.min(Math.max(voucherImageWidth, voucherImageHeight), maxSize) + 'px'; 
      if(voucherImage.width > voucherImage.height){ 
       voucherImage.width = Math.min(voucherImageWidth, maxSize); 
      } else { 
       voucherImage.height = Math.min(voucherImageHeight, maxSize); 
      } 
      voucherImageContainerDiv.style.height = maxSize; 
      voucherImageContainerDiv.style.width = maxSize; 
      voucherImageCanvas.style.maxWidth = imageSize; 
      voucherImageCanvas.style.maxHeight = imageSize; 
      voucherImageCanvas.width = imageSize; 
      voucherImageCanvas.height = imageSize; 
      voucherImageCanvasContext.drawImage(voucherImage, 0, 0); 
      model.voucherAngle = 0; 
     }; 
    };

這個代碼旋轉圖像：

var rotateVoucherImage = function() { 
     voucherImageCanvasContext.setTransform(1, 0, 0, 1, 0, 0); 
     voucherImageCanvasContext.clearRect(0, 0, voucherImageCanvas.width,   voucherImageCanvas.height); 

     model.voucherAngle = (model.voucherAngle + 90) % 360; 
     switch (model.voucherAngle) { 
      case 0: 
       voucherImageCanvas.width = voucherImageWidth; 
       voucherImageCanvas.height = voucherImageHeight; 
       voucherImageCanvasContext.translate(0, 0); 
       break; 
      case 90: 
       voucherImageCanvas.width = voucherImageHeight; 
       voucherImageCanvas.height = voucherImageWidth; 
       voucherImageCanvasContext.translate(voucherImageHeight, 0); 
       break; 
      case 180: 
       voucherImageCanvas.width = voucherImageWidth; 
       voucherImageCanvas.height = voucherImageHeight; 
       voucherImageCanvasContext.translate(voucherImageWidth, voucherImageHeight); 
       break; 
      case 270: 
       voucherImageCanvas.width = voucherImageHeight; 
       voucherImageCanvas.height = voucherImageWidth; 
       voucherImageCanvasContext.translate(0, voucherImageWidth); 
       break; 
     } 
     voucherImageCanvasContext.rotate(model.voucherAngle * 2 * Math.PI/360); 

     voucherImageCanvasContext.drawImage(voucherImage, 0, 0); 
    };

我的問題是：

訪問頁面時，畫布是空的。但是，當點擊旋轉按鈕時，圖像旋轉並按預期顯示良好。

你們對這個問題有什麼想法嗎？

謝謝。

來源

2014-09-21 yofisim

該問題可能與在img.onload之前設置img.src屬性有關。您應該始終在src之前設置onload。 – veidelis 2014-09-21 13:07:15

我發現了這個問題。

我設置

voucherImageCanvas.width = imageSize; 
voucherImageCanvas.height = imageSize;

到

voucherImageCanvas.width = voucherImageWidth; 
voucherImageCanvas.height = voucherImageHeight;

完美的作品。

謝謝:)

來源

2014-09-22 07:25:20 yofisim

畫布圖像不顯示在

回答

相關問題