2013-04-11 13 views
6

Bir wysiwyg editörü için araştırma yaptım ve ckeditor'u güzel buldum, ancak görüntüyü editöre kopyalayıp yapıştırmam gerekiyor.Web sayfanıza görüntü yapıştır

http://pasteboard.co/ neye ihtiyaç duyduğumu tam olarak bu web sitesini buldum, ancak bunun nasıl yapıldığını bulamıyorum.

Herhangi bir fikriniz veya çözümünüz var mı?

Saf html5/javascript'te bir çözümü tercih ederim ve herhangi bir eklentiden sakınmak istiyorum, ancak bir gümüş ışığı veya flaş da kabul edilebilir.

+0

Neden oylama? –

+0

Oy vermedi, ama bir şey denemeden bir çözüm istediğin için bunu söyleyebilirim. – Daedalus

+0

Her zaman yaptığım gibi bu soruyu göndermeden önce denedim ama ne işe yaramadığımı ya da sadece Chrome'da çalışmamı sağladım, bu yüzden –

cevap

9

Bunu yapmanın iki yolu vardır, kolay yol ve zor yol.

Kolay Yönlendirme: Clipboard API'u kullanın. Bu bir "HTML5" API'sıdır, ancak yalnızca Chrome'da doğru şekilde desteklenir. Bu, yapıştırılmış bir görüntünün panonuzdan Blob olarak erişmenize izin verir. Sonra bu Blob sunucunuza bir XHR2 isteği ile gönderebilirsiniz.

Zorluk: Ne yazık ki, Chrome dışındaki tüm tarayıcılar için yapmanız gereken budur ve hoş değil. Bir "yapıştırma hedefi öğesi" nin içinde gizli bir içerik düzenlenebilir DIV oluşturmanızı içerir. Bu yapıştırılan görüntüyü alacaktır. Ardından, görüntüyü Blob'a dönüştürülmesi gereken bir <canvas> üzerine çizmeniz gerekecektir. Ama bekleyin, daha iyi olur. Bazı durumlarda (muhtemelen birçok durumda) çapraz etki alanı resimleri (sunucu tarafı) da gerekebilir. Görüntüyü barındıran sunucu, barındırdıkları görüntülere CORS isteklerine izin vermiyorsa bu gerekli olabilir. Bu durumla ilgili daha fazla bilgiyi this MDN article numaralı telefondan okuyabilirsiniz.

Korumakta olduğum, javascript tabanlı bir yükleyici olan Fine Uploader, görüntüyü yalnızca yapıştırma yoluyla desteklemeyi, ancak şu anda yalnızca Chrome'da desteklemektedir. Yeterince istek aldığım takdirde Clipboard olmayan API tarayıcılarında bunu uygulama zahmetinden geçeceğimi düşündüm. Açıkçası, Clipboard API'sini uygulamayan tarayıcılarda CORS özellikli olmayan görüntüleri işlemek için, görüntü sunucu tarafının proxy edilmesini gerektirdiği için, çabaya değer gibi görünmüyor (tabii ki, kullanıcı tabanım bana bunu söylemezse) bunu istiyorlar).

Bu yardımcı olur umarım.

+0

Zor yol bana göre iyi. Firefox'da kopyala yapıştırmanın çalıştığını gördüm ancak görüntü veri url'si olarak bu davranışı kullanmanın bir yolu var mı? Sadece IE10 –

+0

içinde çalışıyorsa sorunum yok Sadece bilgi için pasteboard.co'nun Github deposunu ve bir çözümü uygulamak için kullandığınız bağlantılar https://github.com/JoelBesada/pasteboard –

İlgili konular