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变量无法在本地范围外访问

回答

相关问题