画布图像不显示在

页

的负载我有这个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

画布图像不显示在

回答

相关问题