Question

我有一个小错误，它似乎表明在图像数据作为其来源传递时，在图像完全加载之前调用了onload函数。

这是HTML

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
</head>
<body>
    <canvas id='finalImage'></canvas>
</body>
</html>

这是javascript：

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

var image = new Image();
image.onload = function() {
    // I've also put a console.log here at one point, and it does get called.
    context.drawImage(image, 0, 0, canvas.width, canvas.height);
};
image.src = "data:image/jpeg;base64,/9j/4QNMR..."; // cut for sanity.

var outputCanvas = $("#finalImage")[0];
var outputContext = outputCanvas.getContext('2d');

// If I uncomment this line, the image is drawn.
//context.drawImage(image, 0, 0, canvas.width, canvas.height);

// If I change canvas to image, its also drawn, which means it is being loaded.
// But it seems to indicate to me that onload gets called too early.
outputContext.drawImage(canvas, 0, 0);

Here is the link to the JSFiddle.

如果你发现它有什么问题，请告诉我，现在已经搞了很多。

谢谢！

Answer 1

在outputContext.drawImage(canvas, 0, 0);之前

context.drawImage(image, 0, 0, canvas.width, canvas.height);调用，以保证在outputContext之后将canvas吸引到将其置于onload函数中

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

var image = new Image();
var outputCanvas = $("#finalImage")[0];
var outputContext = outputCanvas.getContext('2d');
image.onload = function() {
    // I've also put a console.log here at one point, and it does get called.
    context.drawImage(image, 0, 0, canvas.width, canvas.height);
    outputContext.drawImage(canvas, 0, 0);
};
image.src = "data:image/jpeg;base64,/9j/4QNMR..."; // cut for sanity.

http://jsfiddle.net/mowglisanu/ruKht/14/

当我传入图像数据字符串（基础64）时，图像onload似乎被提前调用

1 个答案: