HTML Canvas繪制圖像不起作用

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文檔

其次，我沒有看到你給其中x屬性的變量，這是必要的，對MDN找到這里 ，（其中還引用W3文檔在這里 ）

Answer 2

這個問題永遠無法回答。 我正在使用promise來繪制其他圖像，然后在解決它們后執行$ 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));

當我這樣做時，一切都很好。