Еще один вопрос JavaScript «Копировать изображение в буфер обмена» - PullRequest
Новая
       33

Еще один вопрос JavaScript «Копировать изображение в буфер обмена»

0 голосов
/ 04 апреля 2019

Я пишу PWA-версию приложения Ionic, где пользователь может сделать снимок и прикрепить его к электронному письму, созданному из приложения. Поскольку Chrome требует от вас перенаправить окно для создания электронного письма, и поскольку этот подход не поддерживает вложения, я подумал о том, чтобы скопировать изображение в буфер обмена, а затем попросить пользователя вставить его в электронное письмо. Мальчик, это оказалось сложным ...

Я использую метод document.execCommand ('copy') ", чтобы получить редактируемый контент, и у него нет проблем с захватом текста. Работает в браузере просто отлично, Chrome, Safari, даже Edge. Но когда я запускаю устройство на Android или iOS, изображение выглядит как небольшой пустой блок. Я использую немного кода из этого кода (и он работает даже на Android / iOS): https://codepen.io/chrisdavidmills/pen/gzYjag. Разница в том, что мое изображение не статично; он фиксируется пользователем с помощью его камеры, а затем я добавляю его в DOM.

Вот мой HTML: 

<div id="containerToHoldImageForPWA" contenteditable="true"></div>
...
<a id="copyButton" href="#" (click)="selectEditableRegion()" style="float: right;" class="contenteditable-btn">
    <ion-icon name="camera" aria-label="camera"></ion-icon>
</a>
<a id="copyButton" href="#" (click)="copySelectedRegion()" style="float: right;" class="contenteditable-btn">
    <ion-icon name="camera" aria-label="camera"></ion-icon>
</a>

И мой Javascript (машинопись): 

  processFile(fileEvent) {
    let _selectedFile = <File>fileEvent.target.files[0];

    if (_selectedFile.type.match(/image.*/)) {
      const reader = new FileReader();
      reader.onload = () => {
        let image = new Image();
        image.onload = () => {
          // Resize the image
          let canvas = document.createElement('canvas');
          let max_size = 640;
          let width = image.width;
          let height = image.height;

          if (width > height) {
            if (width > max_size) {
              height *= max_size / width;
              width = max_size;
            }
          } else {
            if (height > max_size) {
              width *= max_size / height;
              height = max_size;
            }
          }

          canvas.width = width;
          canvas.height = height;
          canvas.getContext('2d').drawImage(image, 0, 0, width, height);
          let dataUrl = canvas.toDataURL('image/jpeg');

          let div = document.getElementById('containerToHoldImageForPWA');

          let img = document.createElement('img');
          img.id = 'tempimage';
          img.alt = 'Your Photo';
          img.src = dataUrl;
          div.appendChild(img);

        };
        image.src = reader.result as string;
      };
      reader.readAsDataURL(_selectedFile);
    }
  }

  selectEditableRegion() {
    let div = document.getElementById('containerToHoldImageForPWA');
    this.selectContents(div.children[0]);
    // document.execCommand('selectAll');
  }

  copySelectedRegion() {
    document.execCommand('copy');
  }

  selectContents(element) {
    let selection = window.getSelection();
    let range = document.createRange();
    // range.selectNodeContents(element);
    range.selectNode(element);
    selection.removeAllRanges();
    selection.addRange(range);
  }

И немного CSS: 

[contenteditable] {
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
    user-select: none;
}

.contenteditable-btn {
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
    user-select: none;
}

Когда я вставляю данные буфера обмена вместо изображения с текстом атрибута «alt» «Твое фото», я вижу разорванное изображение с текстом «твое фото» alt. Но, как я уже сказал, это прекрасно работает на Chrome или Safari на Windows / Mac соответственно.

Есть идеи?

...