これは少し根強い問題のようで、多くの人が一度だけ真相を究明したいと思っていると思います。
問題は連鎖の中にある
image = new Image();
image.src = imagePath;
次に一時停止して image.complete を待ちます...
while(HHGimg.height == 0)
また
while(!image.complete)
{
setTimeout(function(){ foo },100);
}
続いてキャンバスから base64 メソッドへ。
var canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
var canvasContext = canvas.getContext('2d');
canvasContext.drawImage(image, 0, 0, canvas.width, canvas.height);
imageData = canvas.toDataURL('image/jpeg');
問題は、image.complete が機能し、有効なオブジェクトがキャンバスに渡されることを確認するための一時停止です。
必要なのは、スクリプトを失速させるループで終了することなく、一時停止が完了するのに十分であることを確認する方法です (この「while」方法のようです)。
続行する前に有効な画像を待つ方法についてのアイデア...
私の全体の機能は次のとおりです...
<script type="text/javascript">
function imageFetch(imgpath, imgname)
{
imgdata = "";
image = new Image();
image.src = imgpath + imgname;;
while(image.height == 0)
{
setTimeout(function(){imgdata = "";},100);
}
var canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
var canvasContext = canvas.getContext('2d');
canvasContext.drawImage(image, 0, 0, canvas.width, canvas.height);
imgdata = canvas.toDataURL('image/jpeg');
return imgdata;
}
</script>
...しかし、画像が完全にロードされることを確認するための一時停止まで、戻り値の一部は単に「data:,」です。
そして今、あなたに。これを倒す方法についてのアイデアはありますか?