在Firefox上画布绘制图像问题，在chrome中运行良好 [英] Canvas Draw Image issue on firefox, works well in chrome
问题描述
我会假设这是某种兼容性问题。
一切都在chrome中完美运行，但在firefox中，< canvas> 根本不会绘制任何东西。
I will assume this is some sort of compatibility issue.
Everything works perfectly in chrome, but in firefox the <canvas> simply doesn't draw anything.
function drawStage(stageNum) {
var cap = canvasArray.length; //keeps the canvasElements
var i;
var stageImages = images["stage" + stageNum];
var stageDimensions = imageDimensions["stage" + stageNum];
//console.log("Cap is: " + cap);
for (i = 0; i < cap; i++) {
var canvas = document.getElementById(canvasArray[i]);
var canvasContext = canvas.getContext("2d");
var image = document.getElementById(stageImages[i]);
canvasContext.clearRect(0, 0, 1280, 1280);
canvasContext.drawImage(image, stageDimensions[i][0], stageDimensions[i][1], stageDimensions[i][2], stageDimensions[i][3]);
//document.getElementById(zIndexes[i][0]).style["z-index"] = zIndexes[i][stageNum];
//console.log(document.getElementById(zIndexes[i][0]).id);
}
}
编辑： 这里是我所做的test代码示例的dropbox链接，简单得多，1个图像，1个画布，1个div，类似（几乎相同）的脚本，仍然在firefox中不起作用，但在chrome中工作。如果你可以在那里解决问题，那么这也将得到解决。
here is dropbox link for "test" code-sample that I made, much simpler, 1 image, 1 canvas, 1 div, similar (practically same) script, that is still not working in firefox, yet works in chrome. If you can solve the issue there, then this will be solved as well.
更新：数组低于每个请求，它们很简单不同元素/坐标的输入。我向你保证，阵列本身没有问题，一切都在Chrome中运行良好。关于函数的DrawImage（）方法的一些事情导致我说的问题。 （数组下面的进一步说明）
UPDATE: Arrays are below, per request, they are simple imput of different elements/coordinates. I assure you though, there is no issue within the arrays themselves, everything works nice in chrome. Something about the DrawImage() method from the function is causing the problem I'd say. (further explanation below the arrays)
图像是< img> 的（全局）ID数组元素。
images is a (global) array of ids for the <img> elements.
var images = {
stage1: ["character1Base", "character2Base", "character3Base", "character4Base", "character5Base", "character6Base", "character3BotImg"],
stage2: ["character1Sit", "character2Base", "character3Base", "character4Base", "character5Base", "character6Base", "character3BotImg"],
stage3: ["character1Sit", "character2Drink", "character3Base", "character4Base", "character5Base", "character6Base", "character3BotImg"],
stage4: ["character1Sit", "character2Drink", "character3Base", "character4Base", "character5Base", "character6Doll", "character3BotImg"],
stage5: ["character1Sit", "character2Drink", "character3Eat", "character4Base", "character5Base", "character6Doll", "character3EatBot"],
stage6: ["character1Sit", "character2Stand", "character3Eat", "character4Base", "character5Base", "character6Doll", "character3EatBot"],
stage7: ["character1Sit", "character2Stand", "character3Eat", "character4Sit", "character5Base", "character6Doll", "character3EatBot"],
stage8: ["character1Sit", "character2Stand", "character3Eat", "character4Sit", "character5Sit", "character6Doll", "character3EatBot"],
stage9: ["character1Sit", "character2Eat", "character3Eat", "character4Sit", "character5Sit", "character6Doll", "character3EatBot"],
stage10: ["character1Drink", "character2Eat", "character3Eat", "character4Sit", "character5Sit", "character6Doll", "character3EatBot"]
};
imageDimensions是一个（全局）数组井，尺寸，posX，posY，sizeX& SIZEY。
imageDimensions is a (global) array of well, dimensions, posX, posY, sizeX & sizeY.
var imageDimensions = {
stage1: [[0, 0, 233, 485], [0, 0, 153, 407], [20, 0, 220, 200], [0, 150, 505, 210], [0, 0, 315, 391], [0, 0, 480, 435], [1, 0, 220, 180]],
stage2: [[105, 35, 180, 440], [0, 0, 153, 407], [20, 0, 220, 200], [0, 150, 505, 210], [0, 0, 315, 391], [0, 0, 480, 435], [1, 0, 220, 180]],
stage3: [[105, 35, 180, 440], [0, 0, 153, 407], [20, 0, 220, 200], [0, 150, 505, 210], [0, 0, 315, 391], [0, 0, 480, 435], [1, 0, 220, 180]],
stage4: [[105, 35, 180, 440], [0, 0, 153, 407], [20, 0, 220, 200], [0, 150, 505, 210], [0, 0, 315, 391], [0, 0, 480, 435], [1, 0, 220, 180]],
stage5: [[105, 35, 180, 440], [0, 0, 153, 407], [3, 7, 226, 180], [0, 150, 505, 210], [0, 0, 315, 391], [0, 0, 480, 435], [1, 9, 220, 180]],
stage6: [[105, 35, 180, 440], [0, 0, 172, 490], [3, 7, 226, 180], [0, 150, 505, 210], [0, 0, 315, 391], [0, 0, 480, 435], [1, 9, 220, 180]],
stage7: [[105, 35, 180, 440], [0, 0, 172, 490], [3, 7, 226, 180], [70, 0, 341, 380], [0, 0, 315, 391], [0, 0, 480, 435], [1, 9, 220, 180]],
stage8: [[105, 35, 180, 440], [0, 0, 172, 490], [3, 7, 226, 180], [70, 0, 341, 380], [18, 72, 305, 422], [0, 0, 480, 435], [1, 9, 220, 180]],
stage9: [[105, 35, 180, 440], [0, 0, 173, 473], [3, 7, 226, 180], [70, 0, 341, 380], [18, 72, 305, 422], [0, 0, 480, 435], [1, 9, 220, 180]],
stage10: [[105, 32, 162, 440], [0, 0, 173, 473], [3, 7, 226, 180], [70, 0, 341, 380], [18, 72, 305, 422], [0, 0, 480, 435], [1, 9, 220, 180]]
};
说明：
该功能用于在屏幕上绘图在不同的元素中，
属于这些元素的字符。它们用画布
绘制（稍后将在画布中进行动画处理）。 stageNum 这是
该函数所用的唯一参数决定了将要绘制的内容。
Explanation:
The function is meant to draw on screen in different elements,
characters that belong to these elements. They are drawn in canvas
(will later be animated in canvas as well). The stageNum which is
the only parameter the function takes determines what will be drawn.
任何人都知道问题是什么？ （我已经阅读了一些相似的帖子，但是所有这些帖子中的问题都是layerX，鼠标位置的第一层，但是我根本没有使用mouseover / mousein / mouseout，仍然没有绘制元素。
Anyone know what the problem is? (I've read a few similar posts but issue in all of them was layerX, layerY of the mouse position, however I am not using mouseover / mousein / mouseout here at all, still elements are not drawn.
推荐答案
您的问题是您尝试绘制的图像是svg图像，并且这些svg文档具有相对宽度和 height 属性。
Your problem is that the image your are trying to draw are svg images, and that these svg documents have relative width and height attributes.
浏览器无法设置高度或宽度它必须绘制的图像，因此无法将其渲染到画布上。（它可以在文档中进行估算，因为它可以相对于某些东西，但不能在画布中）。
The browser can't set a height nor a width to the image it has to draw, and hence it can't render it to the canvas. (It is able to do an estimation in the document, since it can be relative to something, but not in the canvas).
所以解决方案是在你的svg中设置绝对宽度和 height 属性文件，
So the solution is to set absolute width and height attributes in your svg files,
或者，更复杂的是，首先将其绘制为< iframe> 或< object> ，然后绘制一个序列化版本，您可以在其中设置这些属性。
Or, more complicated, to first draw it into an <iframe> or an <object>, then draw a serialized version where you'll have set these attributes.
function initialize() {
var canvas = document.getElementById("char1Canvas");
var canvasContext = canvas.getContext("2d");
var image = document.getElementById("char1Img");
resizeSVG(image, function(e){
canvasContext.clearRect(0, 0, 1280, 1280);
canvasContext.drawImage(this, 0, 0);
});
};
var resizeSVG = function(svgImg, callback){
// create an iframe
var iframe = document.createElement('iframe');
// so we don't see it
iframe.height = 0;
iframe.width = 0;
iframe.onload = function(){
var doc = iframe.contentDocument;
var svg = doc.querySelector('svg');
// get the computed width and height of your img element
// should probably be tweaked
var bbox = svgImg.getBoundingClientRect();
// if it's a relative width
if (svg.width.baseVal.unitType !== 1) {
svg.setAttribute('width', bbox.width);
}
// or a relative height
if (svg.height.baseVal.unitType !== 1) {
svg.setAttribute('height', bbox.height);
}
// serialize our updated svg
var svgData = (new XMLSerializer()).serializeToString(svg);
var svgURL = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(svgData);
// create a new Image Object that ill be draw on the canvas
var img = new Image();
img.onload = callback;
img.src = svgURL;
// remove the iframe
document.body.removeChild(iframe);
};
iframe.src = svgImg.src;
document.body.appendChild(iframe);
}
这篇关于在Firefox上画布绘制图像问题，在chrome中运行良好的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
