Kirjautuminen

Haku

Tehtävät

Kilpailu

Putka Open 2025
Alkuerät ovat ohi.

Keskustelu: Ohjelmointikysymykset: HTML: uploadatun kuvan piirtäminen canvasiin

AtskaFin [09.06.2019 21:39:08]

# 

<input type="file" accept="image/*" onchange="updateImage(event)">
<canvas id="testImage" width="400" height="300"></canvas>
function updateImage (event) {
    // Täällä kuva pitäisi piirtää canvasiin
}

Eli minulla on pieni ongelma sen kanssa, että sivustolle uploadattu kuva pitäisi piirtää canvasiin. Canvasin metodi drawImage() vaatii HTML -elementin. inputista saatu kuva ei kelpaa sellaisenaan.

Lisäys:

Sain tehtyä :D

function el(id) { return document.getElementById(id); }
var testImage = el('testImage');
var testImageCtx = testImage.getContext('2d');

function updateImage (event) {
    var reader = new FileReader();
    reader.onload = (e) => {
        var img = new Image();
        img.onload = () => {
            testImageCtx.drawImage(img, 0, 0, img.width,       img.height,
                                        0, 0, testImage.width, testImage.height);
        }
        img.src = e.target.result;
    }
    reader.readAsDataURL(event.target.files[0]);
}

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta