Question

我有这个angularJS应用程序，我正在从画布生成一个图像。我还有其他一切工作，我甚至可以从html中的SVG中绘制图像，但是尝试从相对URL中提取图像无法显示。我知道正在加载图像，并且由于某些控制台记录，它实际上找到了正确的图像。

以下是选项对象：

// Define our options
self.options = {
    team: null,
    itemsPerRow: 3,
    targets: {
        containerId: 'totals',
        svgContainerClassName: 'total-item',
        svgClassName: 'svg-document',
        svgTitleClassName: 'total-title'
    },
    itemPadding: {
        top: 50,
        right: 50,
        bottom: 100,
        left: 50
    },
    canvasPadding: {
        top: 300,
        right: 100,
        bottom: 200,
        left: 100
    },
    sizes: {
        first: 1100,
        all: 300
    },
    footer: {
        logo: '/assets/images/k-logo-orange-black.png'
    }
};

您可以看到页脚徽标。显示的功能是：

// Private function to draw the footer
var drawFooter = function (canvas, ctx) {

    var y = canvas.height - 50;

    // Draw our image
    var img = new Image();
    img.onload = function () {

        console.log(img.width);
        console.log(img.height);
        console.log(canvas.width - self.options.canvasPadding.right - img.width);
        console.log(y - img.height);

        ctx.drawImage(img, canvas.width - self.options.canvasPadding.right - img.width, y - img.height);
    };
    img.src = self.options.footer.logo;
};

因此，控制台日志正在输出图像的尺寸，并且画布位置完全在画布的范围内，但图像不会显示。有谁知道为什么？

Answer 1

我认为你有两件事情在这里发生。首先，如果您将此图像放在SVG元素中，则在Javascript中使用不同的命名空间创建SVG元素，使用诸如（除了少数例外）之类的命令：

var svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
svg.setAttributeNS('http://www.w3.org/2000/svg','xlink','http://www.w3.org/1999/xlink');

请参阅w3文档here

其次，我没有看到你在xN属性中给出了它的变量，这是必要的，在MDN here上找到了（它也引用了w3文档here）

Answer 2

这个问题永远无法回答。我使用promises绘制其他图像，然后在解析后执行 $ q.all（）。我没有用drawFooter返回任何内容，因此没有绘制图像，所以我只是将函数更改为：

// Private function to draw the footer
var drawFooter = function (canvas, ctx) {

    // Create a deferred promise
    var deferred = $q.defer();

    // Get our y location
    var y = canvas.height - 50;

    // Draw the copyright
    ctx.font = '20px lato-regular';
    ctx.fillStyle = 'black';
    ctx.textAlign = 'left';
    ctx.fillText(self.options.footer.copyright, self.options.canvasPadding.left, y);

    // Draw main text
    ctx.font = '60px lato-regular';
    ctx.fillStyle = 'black';
    ctx.textAlign = 'center';
    ctx.fillText(self.options.footer.mainText, canvas.width / 2, y);

    // Create a new image
    var img = new Image();

    // When the image loads
    img.onload = function () {

        // Get our coordinates
        var imageWidth = img.width / 2,
            imageHeight = img.height / 2,
            imageX = canvas.width - self.options.canvasPadding.right - imageWidth,
            imageY = y - imageHeight;

        // Draw the image
        ctx.drawImage(img, imageX, imageY, imageWidth, imageHeight);

        // Resolve our promise
        deferred.resolve();
    };

    // Set the SRC to the logo
    img.src = self.options.footer.logo;

    // Return our promise
    return deferred.promise;
};

然后我确定它被添加到我的pormises数组中：

// Finally add our footer to our promises array
promises.push(drawFooter(canvas, ctx));

当我这样做时，一切正常。

HTML Canvas绘制图像不起作用

2 个答案: