Javascript 我如何裁剪一个'；它当前是一个数据URL？_Javascript_Canvas_Html5 Canvas_Data Uri

Javascript 我如何裁剪一个'；它当前是一个数据URL？

javascript canvas html5-canvas

Javascript 我如何裁剪一个'；它当前是一个数据URL？,javascript,canvas,html5-canvas,data-uri,Javascript,Canvas,Html5 Canvas,Data Uri,我只能访问使用.toDataURL创建的图像。我似乎无法使用任何画布方法来重新创建它我试图将dataURL复制到第二个画布，裁剪该画布，然后将新裁剪的画布添加到现有元素（#屏幕截图） //从svg到画布屏幕捕获的现有数据，取自#canvas元素 var canvas=document.getElementById（'canvas'）； var dataURL=canvas.toDataURL（'image/jpg'）； //获取空的第二个画布 var myCanvas=document.ge

我只能访问使用.toDataURL创建的图像。我似乎无法使用任何画布方法来重新创建它

我试图将dataURL复制到第二个画布，裁剪该画布，然后将新裁剪的画布添加到现有元素（#屏幕截图）


//从svg到画布屏幕捕获的现有数据，取自#canvas元素
var canvas=document.getElementById（'canvas'）；
var dataURL=canvas.toDataURL（'image/jpg'）；
//获取空的第二个画布
var myCanvas=document.getElementById（'canvasCrop'）；
var myContext=myCanvas.getContext（'2d'）；
var-myImage；
var img=新图像（）；
img.src=数据URL；
img.onload=（）=>{
myContext.drawImage（img，019201080,0,019201080）；
myContext.save（）；
//创建新的数据URL
myImage=myCanvas.toDataURL（）；
};
//添加到现有容器中
变量screenshotImg=$（“

注意：当我将原始“dataURL”发送到屏幕快照元素时，它工作正常。一旦我尝试裁剪原始dataURL，它就会以某种方式损坏。我做错了什么？谢谢！

修复代码以反映下面的@kaido注释

<body>
  <canvas id='canvas'></canvas>
  <canvas id='canvasCrop' width='1920px' height='1080px'></canvas>
</body>

<script>

  //existing data from an svg-to-canvas screen capture, taken from #canvas element   
  var canvas = document.getElementById('canvas'); 
  var dataURL = canvas.toDataURL('image/jpg');

  //get empty second canvas
  var myCanvas = document.getElementById('canvasCrop');
  var myContext = myCanvas.getContext('2d');

  var myImage;
  var img = new Image();
      img.src = dataURL;
      img.onload = () => {
        myContext.drawImage(img, 0, 0,1920,1080,0,0,1920,1080);
        myContext.save();

        //create a new data URL
        myImage = myCanvas.toDataURL();

        //add to existing containers
        var screenshotImg = $("<img></img>");
        screenshotImg.attr("src", myImage);
        screenshotImg.prependTo("#screenshot");
      };

</script>


//从svg到画布屏幕捕获的现有数据，取自#canvas元素
var canvas=document.getElementById（'canvas'）；
var dataURL=canvas.toDataURL（'image/jpg'）；
//获取空的第二个画布
var myCanvas=document.getElementById（'canvasCrop'）；
var myContext=myCanvas.getContext（'2d'）；
var-myImage；
var img=新图像（）；
img.src=数据URL；
img.onload=（）=>{
myContext.drawImage（img，019201080,0,019201080）；
myContext.save（）；
//创建新的数据URL
myImage=myCanvas.toDataURL（）；
//添加到现有容器中
变量screenshotImg=$（“

canvas.get（0）

元素没有

get（）

method。您是否根据使用jQuery的代码构建了此示例？如果是这样，您可能希望将其修改为与实际代码一样工作。否则，这将是您的问题，因为您的代码试图使用一个函数，而在绘制图像之前您调用的函数并不存在（这将在img.onload处理程序上异步发生）@PatrickEvans谢谢，说得好。是的，我从jQuery操作中获取了它，但它获取了它的正确部分。我返回并清理了它，因此canvas.toDataURL（）调用是干净的，但问题是相同的。出于某种原因，MyImage没有解析回图像。@Kaido谢谢你……我如何确保它在正确的时刻被调用？将代码移到这个onload处理程序中。

<body>
  <canvas id='canvas'></canvas>
  <canvas id='canvasCrop' width='1920px' height='1080px'></canvas>
</body>

<script>

  //existing data from an svg-to-canvas screen capture, taken from #canvas element   
  var canvas = document.getElementById('canvas'); 
  var dataURL = canvas.toDataURL('image/jpg');

  //get empty second canvas
  var myCanvas = document.getElementById('canvasCrop');
  var myContext = myCanvas.getContext('2d');

  var myImage;
  var img = new Image();
      img.src = dataURL;
      img.onload = () => {
        myContext.drawImage(img, 0, 0,1920,1080,0,0,1920,1080);
        myContext.save();

        //create a new data URL
        myImage = myCanvas.toDataURL();

        //add to existing containers
        var screenshotImg = $("<img></img>");
        screenshotImg.attr("src", myImage);
        screenshotImg.prependTo("#screenshot");
      };

</script>