从数据库中获取图像以在画布html5中显示

Question

我正在尝试从数据库中获取图像以在Canvas上显示，但它不起作用。画布上没有任何东西。 Cana任何人帮助我。

这是我的查询代码

class CreateArticlesTable extends Migration
    {
        public function up()
        {
            Schema::create('articles', function (Blueprint $table) {
                $table->increments('id');
                $table->string('title')->nullable(false);
                $table->longText('article')->nullable(false);
                $table->integer('user_id')->unsigned();
                $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
                $table->timestamps();
            });
        }
        public function down()
        {
            Schema::dropIfExists('articles');
        }
    }

这是我的画布

VBox checkBoxBox = new VBox(5);
    checkBoxBox.setPadding(new Insets(0, 0, 0, 10));

    for (Kind kind:kinds) {
        CheckBox cb = new CheckBox(kind.description());
        cb.setSelected(kind.visible());
        cb.setMaxWidth(Double.MAX_VALUE);
        checkBoxBox.getChildren().add(cb);
    }

这是我的数据库

Answer 1

它无法正常工作，因为您将img元素放在一个canvas元素中，据我所知，这是不可能的。< / p>

您可以删除canvas或使用一些小的javascript，将image绘制到canvas上。

看看我的例子。

＆＃13;

＆＃13;

var canvas = document.getElementById('bgCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();

imageObj.onload = function() {
  context.drawImage(imageObj, 0, 0);
};
imageObj.src = 'http://htmlcolorcodes.com/assets/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg';

＆＃13;

<canvas id="bgCanvas"  width="236" height="422" style="border:1px solid #000000; position:absolute; top:68px; left:38px;">
  Your browser does not support the HTML5 canvas tag.
</canvas>

＆＃13;

＆＃13;

＆＃13;