Question

在确保图像完全加载后，我尝试调用函数保存，但是它不起作用！

在<script>中：

//change image width and heignt (100*100).
var canvas = document.createElement('canvas');
var width = 100; var height = 100;
canvas.width = 100; canvas.height = 100;
var imgTile = new Image(); imgTile.src = this.cropImg;
imgTile.onload = function(){
  canvas.getContext('2d').drawImage(imgTile, 0, 0, width, height);
  var img_data = canvas.toDataURL('image/jpeg');
  console.log("img_data: " + img_data);
  this.New_cropImg = img_data;
  this.showImage = true;
  this.save(this.New_cropImg);
};

和功能保存已经定义，并且可以在 onload 功能之外完美运行。

我该如何解决这个问题？

Answer 1

您的问题是（如注释中所述）您在函数中的上下文错误

imgTile.onload = function(){
  canvas.getContext('2d').drawImage(imgTile, 0, 0, width, height);
  var img_data = canvas.toDataURL('image/jpeg');
  console.log("img_data: " + img_data);
  this.New_cropImg = img_data;
  this.showImage = true;
  this.save(this.New_cropImg);
}.bind(this);

一个简单的.bind(this)可以为您解决。

未捕获的TypeError：this.save不是函数（VueJs）

1 个答案: