主干木偶不正确地呈现元素

Question

我正在使用PC的网络摄像头在基于网络的应用程序中实现QR阅读器。目前这是正确的。

我使用的框架（barcode.js）有一个函数render（element）。

我有两个不同的文件，ScannerView.html和ScannerView.js。请参阅下面的代码：

ScannerView.html

<!-- Content Header (Page header) -->
<section class="content-header has-background-image">
<div class="background">
    <img src="/assets/temp/header.png" />
</div>
<h1><div class="icon"><i class="fa fa-wrench"></i></div> <%=name%></h1>
</section>

<section class="content">
    // Withing the following div, the canvas element should be placed
    <div id="scanner"></div>
</section>

ScannerView.js

var YookrApp = require("../../setup");
var scanner = null;

var ScannerView = Backbone.Marionette.CompositeView.extend({
  template: require("./ScannerView.html"),
  className: "scannerView",

  ui: {
    scannerDiv: "#scanner"
  },

  name: "Yookr Code Scanner",

  initialize: function(options) {
  },

  onRender: function() {
    w69b.qr.decoding.setWorkerUrl("assets/w69b.qrcode.decodeworker.js");
    scanner =  new w69b.qr.ui.ContinuousScanner();
    // Called when a qr code has been decoded.
    scanner.setDecodedCallback(function(result) {
        console.log("Decoded qr code:", result);
    });
    scanner.setStopped(false);
    // Render component in element with id "scanner".
    console.log("Start rendering");
    scanner.render(this.ui.scannerDiv);
    console.log("Rendering done");
  },

  close: function() {
    // We have to dispose the scanner object.
    // If we don"t do this, the webcam will
    // always be enabled
    scanner.dispose();
  }
});

module.exports = ScannerView;

当我运行我的应用时，scanner.render()功能应在 ScannerView.html

中的<canvas>内添加<div id="scanner"></div>元素

问题

我无法使用scanner.render()正确地使用位于我的html文件中的<div id="scanner"></div>来渲染画布。我尝试使用document.getElementById和this.ui.scannerDiv，但结果不同但不正确。

因为我在 ScannerView.js 文件中定义了一个UI元素，所以我应该可以调用scanner.render(this.ui.scannerDiv);这应该使用id为 scanner 的div我的html视图，但是根本没有呈现画布。在我的控制台中，我可以看到以下警告：

  

[.Offscreen-For-WebGL-0000020AB57365B0] GL错误：GL_INVALID_FRAMEBUFFER_OPERATION：glDrawArrays：framebuffer incomplete

和

  

[.Offscreen-For-WebGL-0000020AB57365B0] RENDER警告：绑定到纹理单元2的纹理不可渲染。它可能是非幂2并且具有不兼容的纹理过滤。

当我使用scanner.render(document.getElementById("scanner"));时，我可以看到画布已渲染，但不在正确的位置。请参阅我添加的结果屏幕截图：

此时我被困住了。我不知道如何实现画布在正确的div中呈现。

Answer 1

在搜索谷歌一段时间后，我找到了解决方案。

onRender: function() { }＆＃34;当View的DOM子树准备好插入DOM但在这些元素可见之前＃{3}}时，会触发onRender＆＃34;

在我的javascript文件中将onShow更改为import numpy as np import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data mnist = input_data.read_data_sets("MNIST_data/", one_hot=True) x = tf.placeholder(tf.float32, [None, 784]) W = tf.Variable(tf.zeros([784, 10])) b = tf.Variable(tf.zeros([10])) y = tf.nn.softmax(tf.matmul(x, W) + b) y_ = tf.placeholder(tf.float32, [None, 10]) cross_entropy = tf.reduce_mean(-tf.reduce_sum(y_ * tf.log(y), reduction_indices=[1])) train_step = tf.train.GradientDescentOptimizer(0.5).minimize(cross_entropy) sess = tf.InteractiveSession() tf.global_variables_initializer().run() # or tf.initialize_all_variables().run() for _ in range(1000): batch_xs, batch_ys = mnist.train.next_batch(100) sess.run(train_step, feed_dict={x: batch_xs, y_: batch_ys}) correct_prediction = tf.equal(tf.argmax(y,1), tf.argmax(y_,1)) accuracy = tf.reduce_mean(tf.cast(correct_prediction, tf.float32)) print(sess.run(accuracy, feed_dict={x: mnist.test.images, y_: mnist.test.labels})) 后，canvas元素将呈现在正确的位置。