画像データをソースとして渡すと、画像が完全に読み込まれる前に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);
あなたがそれの何が悪いのかを見つけたら、私に知らせてください、今かなりそれをいじっています。
ありがとう！