粘贴上传图片

hbghlyj

CodePen – HTML5 paste image to page


在文本框粘贴上传图片,例如MyBB从v. 1.8.22开始支持图片粘贴上传.
例如phpBB插件(GitHub)
例如Discuz插件(Discuz disgusts me)
例如GitHub的讨论区的编辑框.
例如SnipNote, textbox.io, Google Docs
⋯

(mybb)
(phpbb)
(Comparison of Internet forum software)

hbghlyj

pasteboard.co/
Super simple and lightning fast image sharing. Upload clipboard images with Copy & Paste and image files with Drag & Drop.

hbghlyj

Interact with the clipboard
Clipboard.read()

1. const destinationImage = document.querySelector('#destination')
2. destinationImage.addEventListener('click', pasteImage);
4. async function pasteImage() {
5.   try {
6.     const permission = await navigator.permissions.query({ name: 'clipboard-read' });
7.     if (permission.state === 'denied') {
8.       throw new Error('Not allowed to read clipboard.');
9.     }
10.     const clipboardContents = await navigator.clipboard.read();
11.     for (const item of clipboardContents) {
12.       if (!item.types.includes('image/png')) {
13.         throw new Error('Clipboard contains non-image data.');
14.       }
15.       const blob = await item.getType('image/png');
16.       destinationImage.src = URL.createObjectURL(blob);
17.     }
18.   }
19.   catch (error) {
20.     console.error(error.message);
21.   }
22. }

Copy the Code

hbghlyj

DiscuzX issue

popcorner
member
an hour ago

此功能计划在未来的新版编辑器中提供。
当前版本的编辑器没有添加这种功能的计划，但应用中心有支持此功能的第三方插件。可以在应用中心的论坛试用此效果。