toDataURLをすると画像が真っ黒になる

Question

前提・実現したいこと

ファイルアップロードの機能のつくろうとしています。
画像をアップロードし、Blobを取得→その後Blobの容量から容量を状況に応じて圧縮、
最後にBlob URLにしてそれをプレビューさせたいです。

発生している問題・エラーメッセージ

本機能は、こちらを参考に作っております。

が、toDataURLをする時点で、アップロードした画像は真っ黒の画像となってしまっています。

該当のソースコード

こちらにアップしました。
codepen上では、プレビューができないので、chromeでみていただければと思います。。

試したこと

alpha: falseを追加することや、
canvas.mozOpaque = true;を追加することを試しましたがダメでした。

どなたか解決方法を教えてくださいますでしょうか？？

Comments

[m.ts10806]

コードは質問に提示できない量ということでしょうか？

[mikkame]

codepenですがjqueryが抜けている、windowInnerWidthが未定義で落ちます

[mai0521]

codepenにjQueryを追加しておりませんでしたので、追加しました。
また、codepenにソースコードを載せるにあたり、一部変数名を変更した箇所があり、その変更が全てに行き割っておりませんでしたので修正しました。

Answer 1

Q. なぜ黒いか？

A. canvasに何も書かれていないからです。

imgUploadメソッドの1行目、imageをnewしてから、これには何も操作をせず、canvasにdrawし
その結果をbase64encodeしたりなんなりしているから。

FileReaderから、readAsDataURLでデータを読み込み始めるところはできているっぽいので
ここから、読み込みが完了したら、imageに書き込むか、canvasに書き込ませればいいと思います

Comments

[mai0521]

ご回答いただきありがとうございます。
imgUploadメソッドで、imageをnewしたあとに、
image.src = $("#file-preview").attr("src");
を追加してみましたが、、まだ真っ黒です。。。。

[mai0521]

FileReaderの読み込み後に、
fr.onload = function() {
$("#file-preview").attr("src", fr.result);
};
をしたことで実現できました！ありがとうございます！！！！