Question

我正在编写Ionic应用程序的PWA版本，用户可以在其中拍照，并将其附加到该应用程序生成的电子邮件中。由于Chrome浏览器要求您重定向窗口以创建电子邮件，并且由于该方法不支持附件，因此我想将图像复制到剪贴板，然后让用户将其粘贴到电子邮件中。男孩被证明具有挑战性...

我正在使用“ document.execCommand（'copy'）”方法获取可编辑的内容，并且捕获文本没有问题。它可以在浏览器，Chrome，Safari，甚至Edge中正常运行。但是，当我在Android或iOS设备上运行时，图像会变成一个小的空白块。我正在使用此Codepen中的一些代码（甚至在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”文本“ Your Photo”的损坏图像，而不是带有“ alt”属性文本“ Your Photo”的图像。但是就像我说的那样，这分别在Windows或Mac上的Chrome或Safari上可以正常使用。

有什么想法吗？

另一个JavaScript“将图像复制到剪贴板”问题

0 个答案: