如何在js函數之外訪問變量

Question

可能微不足道，但是我不知道該怎么做...我想在createThumbnail之外訪問img。 我怎樣才能做到這一點？

功能

function createThumbnail(){
    canvas.deactivateAll().renderAll(); 
    html2canvas($('#chartdiv'), {
        onrendered: function(canvas) {
            var img = canvas.toDataURL("image/png"),
                elem = document.getElementById("thumbnail_img");
                elem.src = img;
        }
    });
}

Answer 1

您正在將局部變量設置為onrendered回調。 將其移到函數外部，然后從函數內部分配該變量。

var img; //Set empty variable here.

function createThumbnail(){
  canvas.deactivateAll().renderAll();
  html2canvas($('#chartdiv'), {
    onrendered: function(canvas) {
      var elem;
      img = canvas.toDataURL("image/png");
      elem = document.getElementById("thumbnail_img");
      elem.src = img;
    }
  });
}

參見這篇關於閉包的文章

Answer 2

由於img是在匿名函數內聲明的，因此默認情況下您不能這樣做。 您必須將其分配給外部可訪問的對象。

var accessibleImg;

function createThumbnail(){
    canvas.deactivateAll().renderAll(); 
    html2canvas($('#chartdiv'), {
        onrendered: function(canvas) {
            var img = canvas.toDataURL("image/png"),
                elem = document.getElementById("thumbnail_img");
                elem.src = img;
            accessibleImg = img;
        }
    });
}

Answer 3

最好是返回一個對象 。 因此您可以多次“使用” createThumbnail（這對於全局變量而言是不可能的 ）。

這樣，您的代碼就很好了，並且您不必根據全局范圍/全局變量來創建函數。

function createThumbnail(){
    canvas.deactivateAll().renderAll(); 
    var img = {}, elem;
    html2canvas($('#chartdiv'), {
        onrendered: function(canvas) {
            img.dataUrl = canvas.toDataURL("image/png"),
            elem = document.getElementById("thumbnail_img");
            elem.src = img;
        }
    });
    return img;
}

var img = createThumbnail();
var dataUrl = img.dataUrl; // contains the dataUrl from the canvas when onrendered was called