files/zh-cn/mozilla/add-ons/webextensions/api/剪切板/setimagedata/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

---
title: clipboard.setImageData()
slug: Mozilla/Add-ons/WebExtensions/API/剪切板/setImageData
tags:
  - API
  - Clipboard
  - 剪贴板
  - 参考
  - 拓展
  - 方法
translation_of: Mozilla/Add-ons/WebExtensions/API/clipboard/setImageData
---
<div>{{AddonSidebar()}}</div>

<p>将图像复制到剪贴板。在将图像写入剪贴板之前，会对图像进行重新编码。如果图像无效，则不会修改剪贴板。</p>

<p>图像被作为包含经过编码的图像的 <code><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a></code> 提供。支持 JPEG 和 PNG 格式。</p>

<p>基于 Chrome 的 <code><a href="https://developer.chrome.com/apps/clipboard" rel="noopener">clipboard.setImageData()</a></code> API，但存在一些差异：</p>

<ul>
 <li>Chrome API 仅适用于应用，不适用于扩展程序。</li>
 <li>此API需要 <code>"clipboardWrite"</code> 权限，Chrome 版本需要 <code>"clipboard"</code> 权限。</li>
 <li>Chrome 的 API 使用回调，此 API 使用 Promise。</li>
 <li>此 API 不支持 <code>additionalItems</code> 参数。</li>
</ul>

<p>这是一个返回 <code><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> 的异步函数。</p>

<h2 id="语法">语法</h2>

<pre class="syntaxbox brush:js">browser.clipboard.setImageData(<em>imageData</em>, <em>imageType</em>)
</pre>

<h3 id="参数">参数</h3>

<dl>
 <dt><code>imageData</code></dt>
 <dd>An <code><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a></code> containing the encoded image data to copy to the clipboard.</dd>
 <dt><code>imageType</code></dt>
 <dd>A {{domxref("DOMString")}} indicating the type of image contained in <code>imageData</code>: <code>"png"</code> or <code>"jpeg"</code>.</dd>
</dl>

<h3 id="返回值">返回值</h3>

<p>A <code><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> that will be resolved with no arguments if the operation succeeded, or rejected if there was an error (for example, because the data did not represent a valid image).</p>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>

<p>{{Compat("webextensions.api.clipboard.setImageData", 10)}}</p>

<h2 id="示例">示例</h2>

<p>Copy a remote image:</p>

<pre class="brush: js" id="ct-71"><span class="quote">// requires:
// * the host permission for "<a href="https://cdn.mdn.mozilla.net/" rel="nofollow">https://cdn.mdn.mozilla.net/</a>*"
// * the API permission "clipboardWrite"

fetch('<a href="https://cdn.mdn.mozilla.net/static/img/favicon144.png" rel="nofollow">https://cdn.mdn.mozilla.net/static/img/favicon144.png</a>')
.then(response =&gt; response.arrayBuffer())
.then(buffer =&gt; browser.clipboard.setImageData(buffer, 'png'));</span></pre>

<p><span class="quote">Copy an image that was bundled with the extension:</span></p>

<pre class="brush: js" id="ct-70">// requires <span class="quote">the API permission </span>"clipboardWrite"

fetch(browser.runtime.getURL('image.png'))
.then(response =&gt; response.arrayBuffer())
.then(buffer =&gt; browser.clipboard.setImageData(buffer, 'png'));</pre>

<p>{{WebExtExamples}}</p>

<div class="note"><strong>说明</strong>

<p> 此 API 基于 Chromium 的 <a href="https://developer.chrome.com/apps/clipboard"><code>chrome.clipboard</code></a> API.</p>
</div>