Canvas resim veri URL’sini almak için, canvas çizimini 64 bit kodlanmış bir PNG URL’sine dönüştüren canvas nesnesinin toDataURL() yöntemini kullanabiliriz. Resim veri URL’sinin jpeg biçiminde olmasını istiyorsanız, toDataURL() yönteminde image / jpeg’yi ilk argüman olarak iletebilirsiniz. Bir jpeg görüntünün görüntü kalitesini kontrol etmek istiyorsanız, toDataURL() yöntemine ikinci argüman olarak 0 ile 1 arasında bir sayı iletebilirsiniz.
Çıktı:
Kod:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!-- canvas görünmez yapılmıştır. display:none olarak--> <canvas id="canvas" width="578" height="200" style="display:none;"></canvas> <p>Resim img etiketinde gösterilmektedir.</p> <img id="resim"> <script> var canvas = document.getElementById('canvas'); var resim = document.getElementById('resim'); var context = canvas.getContext('2d'); // resim çiz context.beginPath(); context.moveTo(170, 80); context.bezierCurveTo(130, 100, 130, 150, 230, 150); context.bezierCurveTo(250, 180, 320, 180, 340, 150); context.bezierCurveTo(420, 150, 420, 120, 390, 100); context.bezierCurveTo(430, 40, 370, 30, 340, 50); context.bezierCurveTo(320, 5, 250, 20, 250, 50); context.bezierCurveTo(200, 5, 150, 20, 170, 80); context.closePath(); context.lineWidth = 5; context.fillStyle = '#8ED6FF'; context.fill(); context.strokeStyle = '#0000ff'; context.stroke(); // resmi olarak kaydetme (png format varsayılan olarak) var dataURL = canvas.toDataURL(); resim.src=dataURL; </script> |
Yorum Yap