Jupyter Notebook 中的 Google Colabs eval_js？答案

【问题标题】：Google Colabs eval_js in Jupyter Notebook?Jupyter Notebook 中的 Google Colabs eval_js？
【发布时间】：2020-12-13 02:29:18
【问题描述】：

有没有办法在 Jupyter Notebook 中获取 google.colab.output.eval_js 的行为？我有一些代码使用IPython.display 让用户绘制图像。当按下按钮时，JS 将图像的内容保存为data，然后我在 Python 中使用data = eval_js("data") 将该内容拉入 Python。我试图在 Jupyter Notebook 中复制这种行为。我把完整的代码放在下面。

from IPython.display import HTML, Image
from google.colab.output import eval_js

canvas_html = """
<canvas width=%d height=%d style="background-color:rgb(240,240,240)"=></canvas>
<button>Guess Number</button>
<script>
var canvas = document.querySelector('canvas')
var ctx = canvas.getContext('2d')
ctx.lineWidth = %d
var button = document.querySelector('button')
var mouse = {x: 0, y: 0}
canvas.addEventListener('mousemove', function(e) {
  mouse.x = e.pageX - this.offsetLeft
  mouse.y = e.pageY - this.offsetTop
})
canvas.onmousedown = ()=>{
  ctx.beginPath()
  ctx.moveTo(mouse.x, mouse.y)
  canvas.addEventListener('mousemove', onPaint)
}
canvas.onmouseup = ()=>{
  canvas.removeEventListener('mousemove', onPaint)
}
var onPaint = ()=>{
  ctx.lineTo(mouse.x, mouse.y)
  ctx.stroke()
}
var data = new Promise(resolve=>{
  button.onclick = ()=>{
    resolve(canvas.toDataURL('image/png'))
  }
})
</script>
"""

def draw(filename='drawing.png', w=280, h=280, line_width=20):
  display(HTML(canvas_html % (w, h, line_width)))
  data = eval_js("data")
  # do sth with the variable in python ...

【问题讨论】：

标签： javascript python jupyter-notebook google-colaboratory

【解决方案1】：

去pip install Js2Py

那么，

from js2py import eval_js

【讨论】：