How can I drawimage by canvas in vue - vue.js

Question

I have try to draw image from axios get methods.
I can obtain img in my , but can not draw in my here is my code ,include html and vue code:
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>
in my web
I have put some error log maybe have some useful info
but seems have no effect
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
and I have try onload but failed, how can I draw img in vue methods,
thx