js粘貼板為什么獲取不到圖片信息_【第1829期】復制黏貼上傳圖片和跨瀏覽器自動化測試...

前言

這個操作體驗倒是不錯。今日早讀文章由丁香園@蔣璇投稿分享。

@蔣璇, 前端開發攻城獅, 現任職于丁香園. 英語愛好者, 測試驅動開發(TDD)&行為驅動開發(BDD)推崇者. 先專注于 https://github.com/Jiang-Xuan/tuchuang.space 項目的測試驅動開發探索

正文從這開始~~

在網頁中上傳圖片有多重選擇.

點擊文件上傳控件, 選擇文件進行上傳
從文件瀏覽器中拖拽文件進行上傳
從系統粘貼板中粘貼上傳

本篇文章著重介紹最后一種, 也是最方便的上傳的方法, Control/Command + v 進行上傳, 以及如何使用 selenium 來跨瀏覽器的自動化測試這個功能.

一般的截圖程序, 比如 QQ, 微信, PrintScreen 按鈕, 都會將截圖以 png 格式放入系統粘貼板, 所以這里討論 png 格式的粘貼, 而不是其他格式的, 更多的還是給截圖程序使用.

瀏覽器如何獲取 Control/Command + v 粘貼的圖片數據??

Note: 支持 IE 11, 以及現代瀏覽器Chrome, Firefox, Safari

現代瀏覽器在 paste 事件中提供 clipboardData 屬性來訪問粘貼板中的數據

獲取粘貼板中的圖片數據可以通過監聽 paste 事件來實現:

document.addEventListener('paste', (event) => {

const { items } = event.clipboardData

if (items) {

;[...items].forEach((item) => {

if (item.type.indexOf('image') !== -1) {

// item 的 mime 類型是圖片, 說明想要粘貼的是圖片數據

// https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem

}

})

}

})

上面的代碼中 item 提供 getAsFile 方法來獲取粘貼的圖片的數據的二進制數據:

file = item.getAsFile()

這里獲取到的 file 為 File 的實例, 繼承自 Blob, js 中的二進制數據, 你可以直接將 file 上傳給后端服務器就可以完成圖片的上傳:

const formData = newFormData()

formData.append('images', file)

const xhr = newXMLHTTPRequest()

xhr.open('POST', 'https://tuchuang.space/api/v1/images')

xhr.send(formData)

上訴討論的是現代瀏覽器的處理, 麻煩的是 IE 11 的處理(IE11 以下的瀏覽器無法獲取粘貼板中的圖片數據, 就不用嘗試了?), IE 11 支持粘貼板中的圖片以 img 標簽, src 為圖片的 base64 編碼放入設置了 contenteditable 屬性的元素之中, 官方來源 Enhanced Rich Editing Experiences in IE11

IE 11 中需要使用 hack 的方法來獲取粘貼板中的圖片數據

hack 的實例可以去這里看下, 要使用 IE 11 瀏覽器哦, 目前能找到的在線編輯器支持 IE 的也就是 jsfiddle 了. 大部分代碼都是 copy 來自這個 Stack Overflow 問題中, 思想就是在用戶 paste 的時候 focus 一個設置 contenteditable 屬性的 div, 然后從這個 div 中獲取數據. 接下來 庖丁解牛, 這里解釋的代碼的原理和 jsfiddle 中的例子一致, 但是做了一定的優化, 實際的使用可以去這里看下, 全部代碼如下:

class PasteImage {

/**

* 在獲取到用戶 paste 的圖片數據時的回調函數

* @param {(imageBlobData: Blob) => void} callback

*/

constructor (callback) {

this._callBack = callback

/** @private {boolean} 用戶是否正在按下 ctrl 鍵 */

this._ctrlPressed = false

/** @private {boolean} 用戶是否正在按下 command 鍵, MacOS 系統下 */

this._commandPressed = false

/** @private {HTMLDivElement} 捕獲用戶粘貼的圖片的容器 */

this._pasteCatcher = document.createElement('div')

/** @private {boolean} 是否支持 Native paste 事件 */

this._pasteEventSupport = false

/** @private {HTMLDivElement} 捕獲用戶粘貼的圖片的容器的 ID */

this._pasteCatcherId = `paste-image-${Math.random()}`

this._pasteCatcher.setAttribute('id', this._pasteCatcherId)

this._pasteCatcher.setAttribute('contenteditable', '')

this._pasteCatcher.style.cssText = 'opacity:0;position:fixed;top:0px;left:0px;width:10px;margin-left:-20px;'

/**

* 處理頁面按鍵按下

* @private

* @type {(event: KeyboardEvent) => void}

*/

this._handleOnKeyDown = this._handleOnKeyDown.bind(this)

/**

* 處理頁面按鍵釋放

* @private

* @type {(event: KeyboardEvent) => void}

*/

this._handleOnKeyUp = this._handleOnKeyUp.bind(this)

/**

* 處理頁面的 paste 事件

* @private

* @type {(event: ClipboardEvent) => void}

*/

this._handleOnPaste = this._handleOnPaste.bind(this)

const observer = new MutationObserver((mutations) => {

mutations.forEach((mutation) => {

if (this._pasteEventSupport || this._ctrlPressed === false || mutation.type !== 'childList') {

return

}

if (mutation.addedNodes.length === 1) {

if (mutation.addedNodes[0].src !== undefined) {

this._pasteCreateImage(mutation.addedNodes[0].src)

}

})

observer.observe(this._pasteCatcher, {

childList: true,

attributes: true,

characterData: true

})

}

/**

* 處理非標準的 paste 事件, 從 image 標簽中獲取數據

* 目前支持的瀏覽器中只有 IE 11 不支持標準的 paste 事件

* IE 11 中粘貼的圖片的格式為 [data url](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs)

*

* atob('MTIz') // 123

*

* Example: data:image/png;base64,MTIz

*

* @private

* @param {string} source image 標簽的 src 屬性

*/

_pasteCreateImage (source) {

const base64String = source.split(',')[1]

const buffer = base64js.toByteArray(base64String)

const uint8 = new Uint8Array(buffer)

const pngBlob = new Blob([uint8], { type: 'image/png' })

this._callBack(pngBlob)

}

/**

* 處理頁面按鍵按下

* @private

* @param {KeyboardEvent} event

*/

_handleOnKeyDown (event) {

const { keyCode } = event

console.log(event)

if (keyCode === 17 || event.metaKey || event.ctrlKey) {

if (this._ctrlPressed === false) {

this._ctrlPressed = true

}

if (keyCode === 86) {

if (document.activeElement !== null && document.activeElement.type === 'text') {

// 允許用戶拷貝文字進入輸入框

return false

}

if (this._ctrlPressed === true) {

this._pasteCatcher.focus()

}

/**

* 處理頁面按下釋放

* @private

* @param {KeyboardEvent} event

*/

_handleOnKeyUp (event) {

// ctrl

if (event.ctrlKey && this._ctrlPressed === true) {

this._ctrlPressed = false

}

// command

if (event.metaKey && this._commandPressed === true) {

this._commandPressed = false

this._ctrlPressed = false

}

/**

* 處理頁面的 paste 事件

* @private

* @param {ClipboardEvent} event

*/

_handleOnPaste (event) {

this._pasteCatcher.innerHTML = ''

if (event.clipboardData) {

const { items } = event.clipboardData

if (items) {

this._pasteEventSupport = true

;[...items].forEach((item) => {

if (item.type.indexOf('image') !== -1) {

console.log(item)

const blob = item.getAsFile()

this._callBack(blob)

}

})

}

/**

* 監聽事件, 將 pasteCatcher 放入 body 中

* @public

*/

install () {

document.body.appendChild(this._pasteCatcher)

document.addEventListener('keydown', this._handleOnKeyDown)

document.addEventListener('keyup', this._handleOnKeyUp)

document.addEventListener('paste', this._handleOnPaste)

}

uninstall () {

document.body.removeChild(this._pasteCatcher)

document.removeEventListener('keydown', this._handleOnKeyDown)

document.removeEventListener('keyup', this._handleOnKeyUp)

document.removeEventListener('paste', this._handleOnPaste)

}

使用方法:

const pasteImage = new PasteImage((blob) => {

// blob 就是獲取到的圖片的二進制數據

})

pasteImage.install()

// 如果想要停止監聽 paste, 調用 pasteImage.uninstall()

constructor 構造函數

構造函數接受一個回調函數作為在接收到數據的時候的回調.

this._callBack = callback

_ctrlPressed 判斷用戶是否按下 control 按鍵(Windows 下粘貼組合鍵為 Control + v), _commandPressed 判斷用戶是否按下 command 按鍵(Macos 下粘貼組合鍵為 command + v, Macos 沒有 IE 11, 其實 Firefox 22 以下也不支持標準的 paste 方法獲取圖片數據?, 不過也可以忽略了) .

/** @private {boolean} 用戶是否正在按下 ctrl 鍵 */

this._ctrlPressed = false

/** @private {boolean} 用戶是否正在按下 command 鍵, MacOS 系統下 */

this._commandPressed = false

_pasteEventSupprt 判斷瀏覽器是否支持通過標準的 paste 事件獲取數據.

/** @private {boolean} 是否支持 Native paste 事件 */

this._pasteEventSupport = false

接下來創建一個 div, 用來在不支持標準的 paste 事件獲取數據的瀏覽器中捕獲用戶粘貼操作(其實就是 IE 11), 給這個 div 設置 id 屬性, 然后設置其的 contenteditable 屬性, 給這個 div 設置 css, 讓其不會顯示在用戶的屏幕上.

/** @private {HTMLDivElement} 捕獲用戶粘貼的圖片的容器 */

this._pasteCatcher = document.createElement('div')

/** @private {HTMLDivElement} 捕獲用戶粘貼的圖片的容器的 ID */

this._pasteCatcherId = `paste-image-${Math.random()}`

this._pasteCatcher.setAttribute('id', this._pasteCatcherId)

this._pasteCatcher.setAttribute('contenteditable', '')

this._pasteCatcher.style.cssText = 'opacity:0;position:fixed;top:0px;left:0px;width:10px;margin-left:-20px;'

接下來是綁定頁面上的幾個事件監聽器的 this 指向, 包括監聽用戶按下按鍵, 釋放按鍵, 和 paste 事件的監聽器.

/**

* 處理頁面按鍵按下

* @private

* @type {(event: KeyboardEvent) => void}

*/

this._handleOnKeyDown = this._handleOnKeyDown.bind(this)

/**

* 處理頁面按鍵釋放

* @private

* @type {(event: KeyboardEvent) => void}

*/

this._handleOnKeyUp = this._handleOnKeyUp.bind(this)

/**

* 處理頁面的 paste 事件

* @private

* @type {(event: ClipboardEvent) => void}

*/

this._handleOnPaste = this._handleOnPaste.bind(this)

為了在 IE 11 上獲取到用戶粘貼到上面的 _pasteCatcher 容器之中的內容, 需要監聽這個 DOM 的子元素的變動, 通過 MutationObserver 來實現, 如果支持標準的 paste 事件獲取數據, 或者是 control 沒有被按下, 或者是不是子元素的變化, 則不處理. 否則找到被添加的元素, 如果是圖片的粘貼, 在 IE11 中將是通過 img 標簽以 data url 為 src, data url 為 image base64 編碼, 將這個 data url 取出來傳遞給 _pasteCreateImage 函數.

const observer = new MutationObserver((mutations) => {

mutations.forEach((mutation) => {

if (this._pasteEventSupport || this._ctrlPressed === false || mutation.type !== 'childList') {

return

}

if (mutation.addedNodes.length === 1) {

if (mutation.addedNodes[0].src !== undefined) {

this._pasteCreateImage(mutation.addedNodes[0].src)

}

})

observer.observe(this._pasteCatcher, {

childList: true,

attributes: true,

characterData: true

})

_pasteCreateImage 方法

接收一個參數, 就是圖片的 data url, 比如 data:image/png;base64,MTIz(MTIz 是 123 的 base64 編碼)

將圖片的 base64 編碼數據從 data url 找出并提取出來.

const base64String = source.split(',')[1]

將 base64 轉成二進制數據, 這里用到的是 base64-js, 可以將 base64 編碼轉換成二進制數據, 在 nodejs 中, 這種轉換是內置的.

const buffer = base64js.toByteArray(base64String).buffer

然后用這個 buffer 創建 mimetype 是 image/png 的 Blob 對象

const pngBlob = newBlob([buffer], { type: 'image/png'})

成功的拿到了需要的數據, 調用回調將數據傳遞出去

this._callBack(pngBlob)

_handleOnKeyDown 方法

這是一個按鍵按下監聽器, 在鍵盤被按下的時候觸發該函數.

從 event 參數中獲取 keycode

const{ keyCode } = event

如果 keycode 是 17 或者是 event.metaKey, event.ctrlKey 成立, 則是用戶按下了 control 修飾鍵.

if (keyCode === 17 || event.metaKey || event.ctrlKey) {

if (this._ctrlPressed === false) {

this._ctrlPressed = true

}

如果 keycode 是 86, 86 是 v 的 keycode. document.activeElement 獲取當前被聚焦的元素 , 如果被聚焦的是一個 type 是 text 的 input 輸入框, 用戶是想將文字拷貝進輸入框, 而不是粘貼圖片.

if (keyCode === 86) {

if (document.activeElement !== null && document.activeElement.type === 'text') {

// 允許用戶拷貝文字進入輸入框

return false

}

if (this._ctrlPressed === true) {

this._pasteCatcher.focus()

}

在 _pasteCatcher 元素被 focus 之后, 用戶 ctrl+v 的數據就會粘貼進 _pasteCatcher 元素內部中:

這會觸發 _pasteCacher 的 MutationObserver 的回調

const observer = new MutationObserver((mutations) => {

mutations.forEach((mutation) => {

if (this._pasteEventSupport || this._ctrlPressed === false || mutation.type !== 'childList') {

return

}

if (mutation.addedNodes.length === 1) {

if (mutation.addedNodes[0].src !== undefined) {

this._pasteCreateImage(mutation.addedNodes[0].src)

}

})

如果瀏覽器原生支持標準的 paste 事件, 或者是 control 按鍵沒有被按下, 或者這不是一個 childList 類型的 mutation, 不處理. 否則判斷 mutation 的對否有添加的節點, 然后判斷第一個被添加的節點的 src 屬性是否存在, 因為圖片的粘貼必定是 img 標簽, 并且有 src 屬性, 這個時候就可以判斷出用戶粘貼的是一張圖片, 將獲得到的圖片的 data url 傳遞給處理函數 pasteCreateImage.

監聽 _pasteCacher 的變化的調用, 其實可以只監聽 childList.

observer.observe(this._pasteCatcher, {

??childList: true,

??attributes: true,

??characterData: true

})

跨瀏覽器自動化測試

CI 服務為 Github 提供的 Github Actions

測試的瀏覽器為: IE 11, Chrome latest(Github Actions 提供的 Chrome), Firefox latest(Github Actions 提供的 Firefox)

e2e 測試的工具為 selenium

為什么是 selenium?

puppeteer, cypress 只支持 chromium 系列瀏覽器, 無法達成跨瀏覽器測試需求 passed

karma 只能在瀏覽器內部執行代碼, 無法操作操作系統的剪切板, passed

測試的步驟如下:

準備一張測試的 png 圖片, 計算這張圖片的 bitmap, 這里是用 jimp 來計算出測試圖片的 bitmap

image.bitmap.data; // a Buffer of the raw bitmap data

向操作系統的剪切板寫入第一步準備的圖片

訪問 tuchuang.space ctrl + v 快捷鍵粘貼圖片

應該頁面發起請求, 并且傳入的是一張 png 圖片, 并且圖片的 bitmap 和第一步準備的圖片的 bitmap 一致

第一步, 準備測試圖片, 計算圖片的 bitmap

第一步和第二步被封裝到了一個單獨的 npm 包中 copy-logo-to-clipboard

測試圖片為 tuchuang.space 的壓縮版 logo, 為了測試方便, 壓縮到了只有4個像素, 像素的 rgba 16進制的值為:

第一個像素的 rgba 值: rgba(124, 158, 181, 253) 第二個像素的 rgba 值: rgba(139, 137, 165, 253) 第三個像素的 rgba 值: rgba(243, 188, 110, 253) 第四個像素的 rgba 值: rgba(219, 89, 89, 253)

第二步, 將圖片寫入操作系統

處理起來最麻煩的一步

支持 Windows, Macos

nodejs 中沒有一個很好的辦法操作操作系統的剪切板, Windows 操作系統下可以使用 C# 加上 .net 框架和操作系統的剪切板交互, 可以看下我的嘗試 github.com/Jiang-Xuan/… github.com/Jiang-Xuan/… 編寫代碼使用的平臺是 Macos, 所以還要處理 Mac 平臺的剪切板的交互, Swift 太難了. 最后我放棄了, 轉而使用 electron 提供的 api 來處理 github.com/Jiang-Xuan/… electron 提供了方法來將圖片寫入操作系統的剪切板.

// Modules to control application life and create native browser window

const{ app, clipboard, nativeImage } = require('electron')

const path = require('path')

console.log('main.js')

const fooImage = nativeImage.createFromPath(path.resolve(__dirname, './logo.png'))

// This method will be called when Electron has finished

// initialization and is ready to create browser windows.

// Some APIs can only be used after this event occurs.

app.on('ready', () => {

console.log('ready')

clipboard.writeImage(fooImage)

console.log(clipboard.readImage())

app.quit()

})

打包一個 electron 應用來實現, electron 的應用打包出來都比較大, 但是在沒有更好的辦法的情況下只能這樣, 分發一個 electron 應用來實現跨平臺的操作系統的剪切板操作. 暴露出去一個 copyLogoToClip 方法, 使用方法為:

const{ copyLogoToClip } = require('copy-logo-to-clipboard')

// 寫入操作系統

await copyLogoToClip()

這里說一個小故事在剛開始的時候我并沒有給這個模塊寫測試用例, 在我實際在 tuchuang.space 項目中寫測試用例的時候我發現在讀取出來的圖片和寫入的圖片的 bitmap 并不一致, 這個時候我不確定是哪一部分出的問題了, 到底是 copy-logo-to-clipboard 在向系統剪切板寫入圖片的時候修改了圖片的 bitmap, 還是瀏覽器在讀取操作系統的剪切板的 bitmap 的時候改變了圖片的 bitmap? 太相信瀏覽器導致我一度懷疑是 electron 修改了圖片的 bitmap, 可是最后卻發現了是某些瀏覽器修改了圖片的 bitmap, 如果我在剛開始的時候對 copy-logo-to-clipboard 寫了測試用例, 我就有理由相信是瀏覽器出了問題, 所以后續我對 copy-logo-to-clipboard 寫了測試用例來保證這個模塊是正確的

第三步, 按下 ctrl+v

在按下 ctrl+v 這一步也有坑, 在 Macos chrome 上, 你會發現無論是 control+v 還是 command+v 都無法執行粘貼操作, 輾轉多處, 在 Stack Overflow 上面發現了解決辦法, 就是按下 Shift + Insert

另一個需要注意的點是在 IE 11 下, 我們做了特殊的粘貼圖片的處理, 如果我們用程序按下 ctrl+v 你會發現無法粘貼圖片, 是因為程序的操作太快了, 沒有給我們聚焦 _pasteCatcher 的機會, 但是實際的用戶操作的時候并沒有這么快, 所以特殊處理一下 IE 11 下的 ctrl+v 的按下的時機, 以更符合實際的用戶操作

const controlKeyDown = driver.actions().keyDown(Key.CONTROL)

const vKeyDown = driver.actions().keyDown('v')

const vKeyUp = driver.actions().keyUp('v')

const controlKeyUp = driver.actions().keyUp(Key.CONTROL)

awaitnewPromise((resolve) => setTimeout(resolve, 2000))

await body.click()

await controlKeyDown.perform()

awaitnewPromise((resolve) => setTimeout(resolve, 500))

await vKeyDown.perform()

awaitnewPromise((resolve) => setTimeout(resolve, 500))

await vKeyUp.perform()

awaitnewPromise((resolve) => setTimeout(resolve, 500))

await controlKeyUp.perform()

頁面發起請求, 并且傳入的是一張 png 圖數據, 并且圖片的 bitmap 和第一步準備的圖片的 bitmap 一致

不想讓頁面真正的向后端發起請求, 但是卻沒有找到一種可以攔截 selenium 操作的瀏覽器的請求, 在 puppeteer 中可以通過監聽 page.on('request') 事件來攔截和 mock 請求

// 來自: https://pptr.dev/#?product=Puppeteer&version=v2.0.0&show=api-pagesetrequestinterceptionvalue

const puppeteer = require('puppeteer');

puppeteer.launch().then(async browser => {

const page = await browser.newPage();

await page.setRequestInterception(true);

page.on('request', interceptedRequest => {

if(interceptedRequest.url().endsWith('.png') || interceptedRequest.url().endsWith('.jpg'))

interceptedRequest.abort();

else

interceptedRequest.continue();

});

await page.goto('https://example.com');

await browser.close();

});

為了達到類似 puppeteer 的這種功能, 可以 mock 一個服務器, 然后在 selenium 環境中請求 mock 的服務器, 我手動實現了一個 mock-server, 提供的功能僅僅滿足該測試的需求, 詳情可以去項目倉庫看細節(建議看測試用例來了解, 沒有文檔的情況下測試用例就是最好的文檔). 配置想要返回的請求, 啟動 mock 服務器

mockServer.config.configResponse({

body: {

images: {

'image_from_clipboard.png': {

mimetype: 'image/png',

md5: '637e2ee416a2de90cf6e76b6f4cc8c89',

filename: 'test-test.png',

ossPath: 'http://example.com/test-test.png',

cdnPath: 'https://i.tuchuang.space/test.png',

deleteKey: '2436b48115486de952296f2b5295aeb90d284761278661102e7dda990c3f67022133080fb1bcd99d7f94678a991c57f1'

}

})

await mockServer.start()

在請求執行完畢之后, 在 mock 服務器接收到的請求中進行搜索, 找到需要的請求, 然后進行判斷請求服務接收到的參數是否正常

// assert https://github.com/Jiang-Xuan/tuchuang.space/issues/36#issuecomment-566868929

awaitnewPromise((resolve) => setTimeout(resolve, 2000))

const requests = mockServer.search({ path: '/api/v1/images'})

awaitnewPromise((resolve) => setTimeout(resolve, 2000))

const outputLogoJimp = await jimp.read(requests[0].files[0].buffer)

const logoBitmap = await getLogoBitmap()

if(forBrowser === 'chrome') {

expect(md5(outputLogoJimp.bitmap.data)).toEqual(md5(logoBitmap))

} else{

expect(outputLogoJimp.getMIME()).toEqual('image/png')

}

你可能注意到了, 對于 bitmap 的一致判定, 我只判斷了 chrome 瀏覽器, 這是一個我目前也都沒有找到具體原因的地方, 接下來用一個段落詳解原因

為什么只對 chrome 瀏覽器判斷 bitmap

本段只針對 Windows 平臺, 在 macos 平臺下, Firefox 是可以正常的讀取出在粘貼板中的圖片的 bitmap

在剛開始寫測試的時候, 我篤定瀏覽器可以正常的讀取出在粘貼板中的圖片的 bitmap, 但是經過后續的測試發現只有 chrome 能正確的讀取圖片的 bitmap, IE 11(hack 方式處理), Firefox(標準的方法) 均無法保證讀取出來的圖片的 bitmap 和最初的圖片的 bitmap 完全一致, 雖然有時肉眼并無法分辨出圖片的細節. 最明顯的一個問題是透明通道丟失了, 初以為是 IE 11 在讀取的時候做了處理, 后來發現 Firefox 也是如此, 并且同一張圖片, 在 IE11和 Firefox 中的結果一致, 所以做出了以下猜測:

IE 11 和 Firefox 都是調用 Windows 提供的某一個接口, 是這個接口讀取操作系統粘貼板的時候做了一些操作, 這也能解釋為什么 Firefox 在 macos 平臺上面是正常的

Chrome 為什么是正常的? chrome 調用了不同的接口, 或者是自己實現了接口

所以最后只針對 chrome 做了 bitmap 的對比, 而在 IE11 和 Firefox 上則只判斷接收到了一張 png 圖片 expect(outputLogoJimp.getMIME()).toEqual('image/png')

你可以使用官方的測試用例來測試一下不同的瀏覽器 w3c-test.org/clipboard-a…

總結

IE 11 獲取粘貼板中的圖片需要 hack 的方式

用 TDD 的方式來測試這個功能其實非常復雜, 因為涉及到了操作系統, 而操作系統又是一個很難以 mock 的對象, 所以只能操作真正的操作系統, Macos 平臺和 Windows 平臺提供的接口不一致, 使用 electron 可以幫助抹平平臺差異.

只有 chrome 保證了讀取出來的圖片的 bitmap 是和原始的圖片的 bitmap 完全一致, 其他瀏覽器均不能保證(在 Windows 下, Macos 下 chrome, Firefox 均可以保證, Safari 沒有測試). 所以盡量不要測試圖片的 bitmap 是否一致, 測試是一張圖片就夠了.

測試步驟:

?準備測試圖片, 計算圖片的 bitmap.

?將圖片寫入操作系統. 注意這里必須對這個操作做測試, 以保證寫入的和讀取出來的圖片數據一致

??按下 ctrl+v. Macos 的 chrome 下按下的是 shift+insert

?頁面發起請求, 并且傳入的是一張 png 圖數據, 并且圖片的 bitmap 和第一步準備的圖片的 bitmap 一致. selenium 測試沒有找到監聽請求的方法, 可以 mock 一個 server. 只有 chrome 需要測試 bitmap, 其余瀏覽器測試接收到的是一張 png 圖片就可