html2canvas生成圖片url，但url變量無法在本地範圍外訪問

我正在使用html2canvas，直到現在我還沒有任何問題。我有一個垂直溢出的div，但我想通過將html2canvas生成的圖像「拼接」在一起來捕獲div的所有內容。這些圖像「塊」將一起構成整個溢出內容。我的測試功能（所謂的點擊一個按鈕）看起來是這樣的：html2canvas生成圖片url，但url變量無法在本地範圍外訪問

function canvasTest() { 
    document.getElementById("myTestDiv").style.display = "block"; 
    html2canvas($("#myCanvasDiv"), { 
     onrendered: function(canvas) { 
      var myImage = canvas.toDataURL("image/png"); 
      document.getElementById("myTestDiv").innerHTML = '<img src="' + myImage + '" alt="img">'; 
      alert(myImage); 
     } 
    }); 
}

簡而言之，#myCanvasDiv的內容被送入myTestDiv的innerHTML，這工作得很好。但是，對於縱向溢出的#myCanvasDiv，我想將多個圖像URL推送到一個數組中，然後使用此數組的內容作爲多個圖像的src元素，這些圖像一起成爲myTestDiv的「縫合」innerHTML。但是，上述函數中的var myImage甚至不能從function(canvas)代碼塊中取出。它具有本地範圍只function(canvas)，因爲一旦任何的innerHTML或警報取出function(canvas)的：

function canvasTest() { 
    document.getElementById("myTestDiv").style.display = "block"; 
    html2canvas($("#myCanvasDiv"), { 
     onrendered: function(canvas) { 
      var myImage = canvas.toDataURL("image/png"); 
      document.getElementById("myTestDiv").innerHTML = '<img src="' + myImage + '" alt="img">'; 
     } 
    }); 
    alert(myImage); 
}

鉻拋出myImage沒有定義的錯誤。我試過如下返回MYIMAGE的價值：

function canvasTest() { 
    document.getElementById("myTester").style.display = "block"; 
    html2canvas($("#SampleSolutionAppendSpace"), { 
     onrendered: function(canvas) { 
      var myImage = canvas.toDataURL("image/png"); 
      document.getElementById("myTester").innerHTML = '<img src="' + myImage + '" alt="img">'; 
      (function() { 
       return myImage; 
      })(); 
     } 
    }); 
    alert(myImage); 
}

我也試圖使返回函數的變量：

function canvasTest() { 
    document.getElementById("myTester").style.display = "block"; 
    html2canvas($("#SampleSolutionAppendSpace"), { 
     onrendered: function(canvas) { 
      var myImage = canvas.toDataURL("image/png"); 
      document.getElementById("myTester").innerHTML = '<img src="' + myImage + '" alt="img">'; 
      var pleezWork = function() { 
       return myImage; 
      }; 
     } 
    }); 
    alert(pleezWork); 
}

但我仍不能訪問本地的變量function(canvas)

哪有我在function(canvas)範圍之外訪問var myImage？

來源

2014-07-17 The One and Only ChemistryBlob

只是在裏面使用它。你也可以將它從內部傳遞給你在外部定義的函數。該函數可以計算並收集響應，將數組傳遞給需要數組的代碼。 – dandavis

爲什麼簡單的警報即使工作呢？如果警報（myImage）放置在函數（畫布）內，但URL會發出警報，但如果警報（myImage）放置在函數（畫布）範圍外，Chrome會拋出錯誤（myImage未定義） –

嘗試一步一步調試代碼，並查看在onrendered事件觸發之前alert（）是否未調用。

來源

2015-07-21 14:20:23

html2canvas生成圖片url，但url變量無法在本地範圍外訪問

回答

相關問題