Вставить изображение в буфер обмена на холст - PullRequest
Новая
       23

Вставить изображение в буфер обмена на холст

3 голосов
/ 24 июля 2011

У меня есть холст, на который пользователи должны вставить изображение.Я хотел бы, чтобы это был кросс-браузер.Я хотел бы только использовать HTML / Javascript.Я также хотел бы использовать флэш-объект.

Ответы [ 2 ]

4 голосов
/ 20 сентября 2011

Это прекрасно работает в Chrome, хотя до сих пор я не смог понять, как заставить его работать в Firefox. Вы можете использовать этот плагин jQuery для обнаружения вставок буфера обмена. Я предполагаю, что вы знаете, как нарисовать изображение, как только у вас есть данные из буфера обмена. 

# jquery.paste_image_reader.coffee
(($) ->
  $.event.fix = ((originalFix) ->
    (event) ->
      event = originalFix.apply(this, arguments)

      if event.type.indexOf('copy') == 0 || event.type.indexOf('paste') == 0
        event.clipboardData = event.originalEvent.clipboardData

      return event

  )($.event.fix)

  defaults =
    callback: $.noop
    matchType: /image.*/

  $.fn.pasteImageReader = (options) ->
    if typeof options == "function"
      options =
        callback: options

    options = $.extend({}, defaults, options)

    this.each () ->
      element = this
      $this = $(this)

      $this.bind 'paste', (event) ->
        found = false
        clipboardData = event.clipboardData

        Array::forEach.call clipboardData.types, (type, i) ->
          return if found
          return unless type.match(options.matchType)

          file = clipboardData.items[i].getAsFile()

          reader = new FileReader()

          reader.onload = (evt) ->
            options.callback.call(element, file, evt)

          reader.readAsDataURL(file)

          found = true

)(jQuery)

Для использования: 

$("html").pasteImageReader
  callback: (file, event) ->
    # Draw the image with the data from
    # event.target.result
0 голосов
/ 24 июля 2011

Насколько я знаю, нет способа сделать это только с помощью JavaScript и HTML.Тем не менее, этот блог описывает достижение этого с помощью Java-апплета

...