HTML画布绘制图像不起作用

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

这里是我的选项对象：

// 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; 
};

所以，控制台日志输出图像的尺寸和位置的帆布也都是我的画布的范围内，但图像只是没有显示。有谁知道为什么？

来源

2015-10-08 r3plica

你可以在某个地方创建一个实例，jsfiddle或其他东西？ – CBroe

很难做到，但我会给它一个镜头 – r3plica

这个问题可能永远不会被回答。我使用承诺来绘制其他图像，然后在解决问题后执行一个$ 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));

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

来源

2015-10-26 11:07:06 r3plica

我想你在这里有两件事情。第一，如果将这个图像的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

其次，我没有看到你给出x属性的变量，这是必要的，MDN here（也参考w3文档here）

来源

2015-10-08 17:44:30 t1nr2y

我没有看到任何与SVG创建有关的问题 - 所用的图像是一个简单的PNG。 – CBroe

在选项中，目标区域提到SVG容器类等我画了一个结论，所以它是可能的，它是不相关的，谢谢你提...我编辑我的职务提及这种不确定性 – t1nr2y

CBroe是正确的，这图像只是一个PNG。 x值由canvas.width设置 - self.options.canvasPadding.right - img.width – r3plica

HTML画布绘制图像不起作用

回答

相关问题