Canvas içerisinde resim döndürme

Muhtemelen canvas context drawImage fonksiyonunu biliyorsunuzdur :

context.drawImage(image, x, y);

Drag&Drop,FileApi ve Canvas kullanarak Resize image (resim boyutlandıma)

Normalde resim kaydetmek oldukça basit bir işlem. Bir form içine File input oluşturarak bu işin üstesinden gelinebilir. Fakat bu resim için ön çalışa yapılması gerekirse ne olacak ? Diğer bir deyişle, resmi kaydetmeden önce resize (yeniden boyutlandıra) yapmanız ve dosya türü PNG ve JPG türünde kayıt edilmesi gerekseydi ?  Canvas burada devreye giriyor.

Javascript Slice() nedir ?

Slice metodunun tanımı ve kullanımı

Slice() metodu bir dizide seçilen elamanı geriye bir dizi nesnesi olarak döndürür.

Slice() metod start olarak verilen bağımsız değişkeni ile hangi elamandan başlayacağını seçer ve end değişkeni ile de bitiş elemanını belirler.

FileSystem API'yi keşfetmek

Filesystem API 2014 yılın Nisan ayında bir web uygulaması olarak ilan edildi fakat farklı tarayıcıların teknik özellikleri enine boyuna hesap edilmemişti. Şimdi ise, bu api Chrome tarayıcsına özgü bir yapıda ve ne yazık ki farklı tarayıcılar tarafından geliştirilemiyor veya uygulanamıyor. Ayrıca W3C standarlarına uygun olarak geliştiriliyor.

Javascript kullanarak DataList içerisindeki bir kontrole erişmek

Bir datalist oluşturuyoruz :

---

<asp:DataList ID="DataList1" runat="server">

    <ItemTemplate>

    <asp:TextBox ID="txt1" runat="server"></asp:TextBox>

    <asp:DropDownList ID="ddl" runat="server"></asp:DropDownList>

    </ItemTemplate>

</asp:DataList>

---

Uncaught TypeError: Cannot call method 'getContext' of null

HTML5 ile gelen canvas elemanı sayfa ilk yüklendiğinde oluşturulmalı veya oluşturulan canvas fonksiyonu çağırılmalıdır. Şayet js canvas nesnesinden önce çalışırsa canvas oluşturulamayabilir. Mozilla mdc sitesinde yer alan çözüm metodu aşağıdadır :

Html5 Canvas Resim Döndürme (Image rotate)

Bu makalede canvas içerisinde bir image nesnesinin nasıl döndürüleceği anlatılacaktır. Anlatım kodlar üzerindedir.

Gereksinim : <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

HTML :