0

私はキャンバスにかなり慣れていないので、これが単純すぎる場合はご容赦ください。ブラウザがキャンバスを使用してこれをサポートしている場合、アップロードする前に画像のサイズを変更したいと思います。ただし、このコード

var img = document.createElement("img");
var reader = new FileReader();  
    reader.onload = function(e) {img.src = e.target.result};
var files = event.target.files;
    reader.readAsDataURL(files[0]);
var canvas = document.createElement('canvas');
    canvas.width = 100;
    canvas.height = 100;
var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

で失敗します

NS_ERROR_NOT_AVAILABLE: コンポーネントは利用できません slice.call( docElem.childNodes, 0 )[0].nodeType;

テストブラウザの Firefox で。何が間違っている可能性がありますか？

アップデート

非常に奇妙です:「alert(canvas);」を追加すると 最後の3行目（デバッグのために時々そうしますが、console.logを使用できることと使用する必要があることはわかっています）、エラーは表示されませんが、画像からはまだ何も表示されません...

4

2 に答える 2

4

キャンバスに描画するには、画像をロードする必要があります。

var img = new Image()
img.onload = function () {
     ctx.drawImage(img, 0, 0)
}
img.src="image.png"

あなたの例では：

var img = document.createElement("img")
var reader = new FileReader()

var canvas = document.createElement('canvas')
canvas.width = 100
canvas.height = 100
var ctx = canvas.getContext("2d")

reader.onload = function(e) {
    var img = new Image()
    img.onload = function () {
        ctx.drawImage(img, 0, 0)
    }
    img.src = e.target.result
}

var files = event.target.files
reader.readAsDataURL(files[0])
于 2013-03-28T10:50:48.497 に答える
0

より簡単な場合は、HTML から画像を読み込むことができます。 

<img id="imagetoload" src="myimage.jpg" />
<script>
    var image = document.getElementById("imagetoload");
</script>

しかし、最善の方法は、ユクレレが言ったように、javascript でそれらをロードすることです。

于 2013-03-28T15:27:02.360 に答える