如何在Vue中通过画布绘制图像

Question

我尝试从axios get方法绘制图像。 我可以在其中获取img，但不能在其中绘制我的代码，包括html和vue代码：

var PROGRAM = {

reset_canvas: function(){
  this.container_dom = document.getElementById("app");
  this.bg_dom = document.getElementById("bg_img");
  this.cvs_dom = document.getElementById("mycanvas");
  console.log('reset canvas', this.bg_dom)
  var promise = this.get_img();
  promise.then(function (data){
    console.log('get_img_done', data);
    alert(data.description);
    this.bg_dom.src = 'data:image/png;base64,' + data.img;
    this.FrameData = data;
    console.log('my', this.bg_dom,)
    this.update_boxes(data);
  }.bind(this), function(error){
    cosole.log('cannot load img', error);
  });
},
methods:{ 
 update_boxes: function(data){
  // init draw img and boxes
  if (this.cvs_dom == null) return ;
  var ctx = this.cvs_dom.getContext("2d")
  this.ctx = ctx;
  // clear previous bg
  ctx.clearRect(0, 0, this.cvs_dom.width, this.cvs_dom.height);
  if (this.bg_dom.naturalWidth > 0){
      console.log('draw', this.bg_dom)
      ctx.drawImage(this.bg_dom, 0, 0, this.cvs_dom.width,    this.cvs_dom.height);
   }
 },
 bg_onload(){
  if (this.flag){
    this.reset_canvas();
  }
  // this.flag = false;
  console.log('flag', this.flag)
 },
 reset_canvas: function(){
  this.container_dom = document.getElementById("app");
  this.bg_dom = document.getElementById("bg_img");
  this.cvs_dom = document.getElementById("mycanvas");
  console.log('reset canvas', this.bg_dom)
  var promise = this.get_img();
  promise.then(function (data){
    console.log('get_img_done', data);
    alert(data.description);
    this.bg_dom.src = 'data:image/png;base64,' + data.img;
    this.FrameData = data;
    console.log('my', this.bg_dom,)
    this.update_boxes(data);
  }.bind(this), function(error){
    cosole.log('cannot load img', error);
  });

  },
 }
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <div>
      <el-button @click="startHacking">Start</el-button>
      <el-button @click="endHacking">end</el-button>
      <el-button @click="bg_onload">bg_onload</el-button>
      <el-button @click="Post_Front_End_Framedata">save </el-button>
      <el-input v-model="global_box_index" placeholder="输入box index" width ="200px" v-on:change="select_box" type="number"></el-input>
     
      <el-select v-model="box_type" placeholder="DT Label" v-on:change="save_box_type">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    <container></container>
    <img src="http://www.w3school.com.cn/i/eg_tulip.jpg" id="bg_img" style="width: 1280px;height: 720px"
         @click="PROGRAM.methods.bg_onload">
    <canvas id="mycanvas" width="1280px" height="720px" @click.1="startHacking"></canvas>
  </div>

在我的网络中 我放了一些错误日志，也许有一些有用的信息 但似乎没有效果

lastError while running storage.remove: IO error: .../000925.ldb: FILE_ERROR_NO_SPACE (ChromeMethodBFE: 3::WritableFileAppend::8)
    at Object.chrome.storage.local.get [as callback] (chrome-extension://pgjjikdiikihdfpoppgaidccahalehjh/webspeed.js:111:33

并且我尝试了onload但失败了，如何在vue方法中绘制img，  谢谢