search

layerssss / paste.js

read image/text data from clipboard (cross-browser)
http://layerssss.github.io/paste.js/
MIT License
463 stars 94 forks source link

Blob vs DataURI #14

Closed vladmalik closed 8 years ago

vladmalik commented 9 years ago

Hi,

Someone pointed out our plugins are similar (see https://github.com/vladmalik/pasteimage). Not too knowledgeable about the method you're using. I see it's basically the same or similar up to a point.

Mind taking a look at mine? It's pretty rudimentary and well annotated. Should I retire mine in favor of yours?

Thanks.

Vlad

layerssss commented 9 years ago

Hi, @vladmalik thanks for pointing out. You are right we used similar methods ---- check the browser support for ev.clipboardData, used a hidden [contenteditable] to trap the image.

For me I had came up with 3 usage scenarios:

  1. it's my original situation -- I can do the focus() using javascript, I just need to get the image, there's no need for a visible textarea or [contenteditable]. It's the same as your plugin.
  2. a textarea just like the github issue commenter which I am looking at, this is really a good experience for markdown composing with screenshots. For chrome, the textarea is the same, just use the paste event would do. For firefox & ie, we can still use the hidden [contenteditable] trick, but we must steal the focus point from the textarea to the hidden div, and after that we have to give it back to the textarea, to make the user feels like it's always been there.
  3. later I thought even for existing [contenteditable]-based wysiwyg editor (like fckeditor), there should be a chance to integrate this, so I added another mode. It's pretty the same, but without the need to make another 'hidden' [contenteditable], because a visible one is already there.

So I made those three scenarios into three invoking modes, sharing most part of the code though.

For blob I think it's better than just DataURI, with blob I can issue a multi-part upload request with XHR2/FormData (which would not be available on old browsers though), so the server side code won't need to decode it from base64, and it can incorporate into existing uploading infrastructures. But anyway, that img.blob itself is converted from DataURI in some situations (when the image is captured using [contenteditable]). But after all, on Chrome it would be pretty reasonable, because there's also a limit for the browser to display DataURI properly, and with a blob we can do URL.createObjectURL

It's also interesting to notice that IE has another proprietary api for accessing clipboard -- window.clipboardData. So I tried to use it whenever it's available.

I will try to add more annotation into my plugin code, it's really poorly annotated.

vladmalik commented 9 years ago

Good to know. Thanks.