Question

Canvas正确显示图像，但是chrome 62或其他一些原因导致我的图像无法正确加载。

例如，我之前的工作画布维度是：

<canvas width="587" height="900"></canvas>

我在画布中加载的资源/图片的尺寸仅为587*900。但在某些设备中我突然看到这样的图像：

上图是下图中的缩放版本。现在，如果我将画布尺寸更改为以下内容：

<canvas width="600" height="900"></canvas>

我得到正确的输出：

现在，问题在于之前没有发生，而且工作正常。即使是现在，对于较旧的尺寸，它仍然正常工作，但仅在某些Android设备中才会出现此错误。

所以，我想知道发生这种情况的原因，是因为某些Chrome更新还是其他原因，因为在第二个头像中看到的图片都是587*900大小。

指令部分：

angular.module('xpresso')
    .directive('avatarcanvas', function () {        
        return {
            restrict: 'EA',
            replace: true,
            template:  '<div>\
                <canvas width="600" height="900"  style="display:none;"></canvas>\
                <img class="canvas-image">\
                </div>',
            scope: {
                customizable: '@' ,
                source: '@',
                uicolor: '@',
                fromDirectiveFn: '=method'
            },
            link: function($scope, element, attr) {
                //1. Configure Canvas.
                var canvas = element[0].children[0];
                var image = element[0].children[1];
                //fitToContainer(canvas);

                //2. Observers for color and image URL
                attr.$observe('source', function(imageURL) {
                    if(imageURL) {
                        var imageObj = new Image();
                        imageObj.onload = function() {
                            $scope.fromDirectiveFn();
                            clearCanvas(canvas);

                            if ($scope.fillColor == "0") { //No color
                                drawImageWithNoColor(canvas, imageObj);
                                image.src = canvas.toDataURL("image/png");
                            } else { //Apply color
                                if($scope.name == 'Eye' || $scope.name == 'BroShapes' || $scope.name=="MouthShapes") {
                                    conditionalReplace('0000FF', canvas, imageObj, $scope.fillColor);
                                } else {
                                    drawImage(canvas,
                                    imageObj,
                                    $scope.fillColor);
                                }

                                image.src = canvas.toDataURL("image/png");
                            }

                            $scope.imageReference = imageObj;
                        };

                        imageObj.src = imageURL;
                    }
                });

                attr.$observe('uicolor', function(color) {
                    $scope.fillColor = color;
                    if ($scope.imageReference != undefined) {
                        clearCanvas(canvas);
                        if ($scope.name == 'Eye' || $scope.name == 'BroShapes' || $scope.name == "MouthShapes") {
                            conditionalReplace('0000FF', canvas, $scope.imageReference, $scope.fillColor);
                        } else {
                            drawImage(canvas,
                            $scope.imageReference,
                            $scope.fillColor);
                        }

                        image.src = canvas.toDataURL("image/png");
                    }
                });

                //Observe for type.
                attr.$observe('name', function(name) {
                    $scope.name = name;
                });
            }
        }

我没有添加的功能很少，这些功能是从上面的代码中调用的。

画布显示缩放图像以获得正确的尺寸

0 个答案: