web-dev-qa-db-ja.com

html5-canvas：画像ファイルをDataURLに変換するとUncaughtTypeErrorがスローされます

選択した画像ファイルのBase64/DataURLをJavascriptで取得しようとしています。ユーザーは基本的にファイル入力コントロールを介して画像を選択し、データURLが生成されます。ただし、次のエラーが発生します。

Uncaught TypeError： 'CanvasRenderingContext2D'で 'drawImage'の実行に失敗しました：指定された値はタイプ '（HTMLImageElementまたはHTMLVideoElementまたはHTMLCanvasElementまたはImageBitmap）'ではありません

HTML：

<body>
    <form id="form1">
    <div>
        <input type="file" id="imageinput" onchange="testit(event)" />
        <canvas width="300" height="300" id="mycanvas" style="display: none;"></canvas>
    </div>
    </form>
</body>

Javascript：

function testit(event) {

            var myImage = URL.createObjectURL(event.target.files[0]);

            var myCanvas = document.getElementById('mycanvas');

            var ctx = myCanvas.getContext('2d');

            ctx.drawImage(myImage, 0, 0);

            var mydataURL = myCanvas.toDataURL('image/jpg');

            alert(mydataURL);

        }

なぜこのコードが機能しないのですか？

javascripthtmlcanvashtml5-canvas
8
Dinuka Jay

URLからキャンバスに直接画像を描画することはできません。そのためには、画像要素/オブジェクトを作成する必要があります。

_var myCanvas = document.getElementById('mycanvas');
var ctx = myCanvas.getContext('2d');
var img = new Image();
img.onload = function(){
    ctx.drawImage(img, 0, 0);

    alert(myCanvas.toDataURL('image/jpeg'));
};

img.src = URL.createObjectURL(event.target.files[0]);
_

ここでは、imageオブジェクトを作成し、srcをユーザーが選択した画像のURLに設定しました。画像が読み込まれた後、キャンバスに追加します。

編集：

ここにもう1つの問題があります。画像のサイズが何であれ、キャンバスの幅と高さが静的であるため、常に画像の300x300のトリミングされたdataurlを取得します。したがって、画像が読み込まれた後、キャンバスの幅と高さを動的に設定できます。 console.log()の代わりにalert()を使用できるため、ブラウザ自体でコンソールから画像を開いて表示できます。

_myCanvas.width = img.width;
myCanvas.height = img.height;
_

最終的なコードは次のとおりです。

_var myCanvas = document.getElementById('mycanvas');
var ctx = myCanvas.getContext('2d');
var img = new Image();
img.onload = function(){
    myCanvas.width = img.width;
    myCanvas.height = img.height;

    ctx.drawImage(img, 0, 0);

    console.log(myCanvas.toDataURL('image/jpeg'));
};

img.src = URL.createObjectURL(event.target.files[0]);
_

これがフィドルです（画像全体と幅と高さの変化をキャンバスで確認できるように、キャンバスを表示しました）：

更新：

@Kaiidoが述べたように、「image/jpg」はmimetypeではないため、PNG画像が生成されます。 「image/jpeg」は、JPG画像とJPEG画像の両方のmimetypeです。

更新されたフィドル：

http://jsfiddle.net/k7moorthi/r8soo95p/4/

7
Kesavamoorthi

キャンバスにオブジェクトURLを描画しようとしています。最初にメモリに画像を作成する必要があります

http://jsfiddle.net/zmtu6t6c/4/

var myImageUrl = URL.createObjectURL(event.target.files[0]);
var myImage = new Image();
myImage.src = myImageUrl;

myImage.onload = function(){

... then do the canvas stuff

}
4
dave.mcalpine