Question

我有 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);
    };

我的问题是：

访问该页面时，画布为空。但是当点击旋转按钮时，图像会旋转并按预期显示良好。

你们对这个问题有什么想法吗？

感谢。

Answer 1

我发现了问题。

我设置

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

到

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

完美无缺。

谢谢：）

画布图像不在页面加载时显示

1 个答案: