Emit NativeImage objects in paint event

Author: zcbenz

atom/browser/api/atom_api_web_contents.cc

@@ -1337,15 +1337,10 @@ bool WebContents::IsOffScreen() const {
   return type_ == OFF_SCREEN;
 }
 
-void WebContents::OnPaint(const gfx::Rect& dirty_rect,
-                          const SkBitmap& bitmap) {
-  v8::MaybeLocal<v8::Object> buffer = node::Buffer::Copy(
-      isolate(),
-      reinterpret_cast<char*>(bitmap.getPixels()), bitmap.getSize());
-  if (!buffer.IsEmpty()) {
-    Emit("paint", dirty_rect, buffer.ToLocalChecked(),
-         gfx::Size(bitmap.width(), bitmap.height()));
-  }
+void WebContents::OnPaint(const gfx::Rect& dirty_rect, const SkBitmap& bitmap) {
+  mate::Handle<NativeImage> image =
+      NativeImage::Create(isolate(), gfx::Image::CreateFrom1xBitmap(bitmap));
+  Emit("paint", dirty_rect, image);
 }
 
 void WebContents::StartPainting() {

docs/api/web-contents.md

@@ -463,33 +463,21 @@ Returns:
 
 * `event` Event
 * `dirtyRect` Object
-  * `x` Number - the x coordinate on the bitmap
-  * `y` Number - the y coordinate on the bitmap
-  * `width` Number - the width of the dirty area
-  * `height` Number - the height of the dirty area
-* `data` Buffer - the bitmap data of the dirty rect
-* `bitmapSize` Object
-  * `width` Number - the width of the whole bitmap
-  * `height` Number - the height of the whole bitmap
+  * `x` Integer - The x coordinate on the image.
+  * `y` Integer - The y coordinate on the image.
+  * `width` Integer - The width of the dirty area.
+  * `height` Integer - The height of the dirty area.
+* `image` [NativeImage](native-image.md) - The image data of the dirty rect
 
 Emitted when a new frame is generated. Only the dirty area is passed in the
 buffer.
 
 ```javascript
-const {BrowserWindow} = require('electron')
-
-let win = new BrowserWindow({
-  width: 800,
-  height: 1500,
-  webPreferences: {
-    offscreen: true
-  }
+let win = new BrowserWindow({webPreferences: {offscreen: true}})
+win.webContents.on('paint', (event, dirty, image) => {
+  fs.writeSync('frame.png', image.toPNG())
 })
 win.loadURL('http://github.com')
-
-win.webContents.on('paint', (event, dirty, data) => {
-  // updateBitmap(dirty, data)
-})
 ```
 
 ### Instance Methods

docs/tutorial/offscreen-rendering.md

@@ -37,19 +37,18 @@ const {app, BrowserWindow} = require('electron')
 
 app.disableHardwareAcceleration()
 
-let win = new BrowserWindow({
-  width: 800,
-  height: 1500,
-  webPreferences: {
-    offscreen: true
-  }
-})
-win.loadURL('http://github.com')
-
-win.webContents.setFrameRate(30)
-
-win.webContents.on('paint', (event, dirty, data) => {
-  // updateBitmap(dirty, data)
+let win
+app.once('ready', () => {
+  win = new BrowserWindow({
+    webPreferences: {
+      offscreen: true
+    }
+  })
+  win.loadURL('http://github.com')
+  win.webContents.on('paint', (event, dirty, image) => {
+    fs.writeSync('frame.png', image.toPNG())
+  })
+  win.webContents.setFrameRate(30)
 })
 ```