HTML5 Canvas Resim Verileri Yükleme

Canvasa bir resim veri URL’si ile yüklemek için, veri URL’si almak üzere bir AJAX araması yapabilir, URL ile bir resim nesnesi oluşturabilir ve sonra resmi tuval bağlamının drawImage() yöntemiyle tuval üzerine çizebiliriz.

Çıktı:

Kod:


<canvas id="canvas" width="578" height="200"></canvas>
<script>
fetch('res.jpg')
.then((response) => response.blob())
.then((blob) => {
    const imageUrl = URL.createObjectURL(blob);
    const img = new Image();
    img.addEventListener('load', () => URL.revokeObjectURL(imageUrl));
    img.src = imageUrl;

    const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');
    img.onload = function() {
        context.drawImage(this, 69, 50);
    };
});
</script>

fetch('res.jpg')

.then((response) => response.blob())

.then((blob) => {

const imageUrl = URL.createObjectURL(blob);

const img = new Image();

img.addEventListener('load', () => URL.revokeObjectURL(imageUrl));

img.src = imageUrl;

const canvas = document.getElementById('canvas');

const context = canvas.getContext('2d');

img.onload = function() {

context.drawImage(this, 69, 50);

};

});

</script>

Kaynak:

developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images

codepen.io/box-platform/pen/MoxzbY

developer.mozilla.org/en-US/docs/Web/API/ImageData/ImageData

stackoverflow.com/questions/42471755/convert-image-into-blob-using-javascript

EtiketlerHTML5 Canvas Dersleri HTML5 Canvas Örnekleri

HTML5 Canvas Resim Verileri Yükleme

Yorum Yap

İptal Et

Bunları da beğenebilirsiniz

Yorum Yap