은 내가 따랐다

안녕 친구 kineticJs이 튜토리얼을 toDataURL를 사용하여 캔버스를 저장할 수 없습니다 캔버스에 그 이미지를 캔버스로 그릴 것입니다). 하지만 이제 toDataURL을 사용하여 캔버스를 저장할 수 없습니다. 제발 도와주세요 ..은 내가 따랐다

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style> 
     body { 
     margin: 0px; 
     padding: 0px; 
     } 
     canvas { 
     border: 1px solid #9C9898; 
     } 
     #buttons { 
     position: absolute; 
     left: 10px; 
     top: 0px; 
     } 
     button { 
     margin-top: 10px; 
     display: block; 
     } 
    </style> 
    <div id="container"></div> 
    <script src="http://html5demos.com/h5utils.js"></script> 
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.9.6.js"></script> 

    <script> 
    function update(group, activeAnchor) { 
     var topLeft = group.get(".topLeft")[0]; 
     var topRight = group.get(".topRight")[0]; 
     var bottomRight = group.get(".bottomRight")[0]; 
     var bottomLeft = group.get(".bottomLeft")[0]; 
     var image = group.get(".image")[0]; 

     // update anchor positions 
     switch (activeAnchor.getName()) { 
      case "topLeft": 
      topRight.attrs.y = activeAnchor.attrs.y; 
      bottomLeft.attrs.x = activeAnchor.attrs.x; 
      break; 
      case "topRight": 
      topLeft.attrs.y = activeAnchor.attrs.y; 
      bottomRight.attrs.x = activeAnchor.attrs.x; 
      break; 
      case "bottomRight": 
      bottomLeft.attrs.y = activeAnchor.attrs.y; 
      topRight.attrs.x = activeAnchor.attrs.x; 
      break; 
      case "bottomLeft": 
      bottomRight.attrs.y = activeAnchor.attrs.y; 
      topLeft.attrs.x = activeAnchor.attrs.x; 
      break; 
     } 

     image.setPosition(topLeft.attrs.x, topLeft.attrs.y); 
     image.setSize(topRight.attrs.x - topLeft.attrs.x, bottomLeft.attrs.y - topLeft.attrs.y); 
     } 
     function addAnchor(group, x, y, name) { 
     var stage = group.getStage(); 
     var layer = group.getLayer(); 

     var anchor = new Kinetic.Circle({ 
      x: x, 
      y: y, 
      stroke: "#666", 
      fill: "#ddd", 
      strokeWidth: 2, 
      radius: 8, 
      name: name, 
      draggable: true 
     }); 

     anchor.on("dragmove", function() { 
      update(group, this); 
      layer.draw(); 
     }); 
     anchor.on("mousedown touchstart", function() { 
      group.draggable(false); 
      this.moveToTop(); 
     }); 
     anchor.on("dragend", function() { 
      group.draggable(true); 
      layer.draw(); 
     }); 
     // add hover styling 
     anchor.on("mouseover", function() { 
      var layer = this.getLayer(); 
      document.body.style.cursor = "pointer"; 
      this.setStrokeWidth(4); 
      layer.draw(); 
     }); 
     anchor.on("mouseout", function() { 
      var layer = this.getLayer(); 
      document.body.style.cursor = "default"; 
      this.setStrokeWidth(2); 
      layer.draw(); 
     }); 

     group.add(anchor); 
     } 

     window.onload = function() { 

     var stage = new Kinetic.Stage({ 
      container: "container", 
      width: 578, 
      height: 200, 
     }); 
     var layer = new Kinetic.Layer(); 
     var rect = new Kinetic.Rect({ 
      x: 239, 
      y: 75, 
      width: 100, 
      height: 50, 
      fill: "#00D2FF", 
      stroke: "black", 
      strokeWidth: 4 
     }); 


     function cancel(e) { 
      if (e.preventDefault) { 
      e.preventDefault(); 
     } 
      return false; 
     } 

     var drop = document.querySelector('#container'); 

     // Tells the browser that we *can* drop on this target 
     addEvent(drop, 'dragover', cancel); 
     addEvent(drop, 'dragenter', cancel); 

     addEvent(drop, 'drop', function (e) { 
     if (e.preventDefault) e.preventDefault(); // stops the browser from redirecting off to the text. 

     var path = e.dataTransfer.getData('Text') 

     loadImgs(stage,path); 

     }); 

     // add the shape to the layer 
     layer.add(rect); 

     // add the layer to the stage 
     stage.add(layer); 

     document.getElementById("save").addEventListener("click", function() { 
      stage.toDataURL(function(dataUrl) { 
      window.open(dataUrl); 
      }); 

     }, false); 

     }; 

    function loadImgs(stage,url) 
    { 
     var yodaGroup = new Kinetic.Group({ 
      x: 100, 
      y: 110, 
      draggable: true 
     }); 

     var layer = new Kinetic.Layer(); 
     layer.add(yodaGroup); 
     stage.add(layer); 

     var imageObj = new Image(); 

     imageObj.onload = function() { 

      var image = new Kinetic.Image({ 

      x: 0, 
      y: 0, 
      image: imageObj, 
      width: 93, 
      height: 104, 
      name : "image" 
      }); 
     yodaGroup.add(image); 
      addAnchor(yodaGroup, 0, 0, "topLeft"); 
      addAnchor(yodaGroup, 93, 0, "topRight"); 
      addAnchor(yodaGroup, 93, 104, "bottomRight"); 
      addAnchor(yodaGroup, 0, 104, "bottomLeft"); 

      yodaGroup.on("dragstart", function() { 
       this.moveToTop(); 
      }); 

     stage.draw(); 
    }; 

    imageObj.src = url; 
} 
    </script> 
    </head> 
    <body> 
    <img src="http://twitter.com/api/users/profile_image/rem" alt="Remy Sharp" /> 
    <img src="http://twitter.com/api/users/profile_image/brucel" alt="Bruce Lawson" /> 
    <img src="http://twitter.com/api/users/profile_image/Rich_Clark" alt="Rich Clark" /> 
     <div id="buttons"> 
     <button id="save"> 
     Save as image 
     </button> 

    </body> 
</html>

출처

2012-06-04 Gobi

문제는 이미지가 예와 다른 도메인에서 호스팅되는 것입니다. 동일한 도메인 보안 정책이 캔버스의 dataURL에 액세스 할 때 적용되므로 외부 이미지를 추가하자마자 dataURL을 얻을 수 없습니다.

출처

2012-06-13 17:37:42 yacomink

동일한 폴더에서 이미지를 호스팅했지만 여전히 작동하지 않습니다 ... 다른 사이트에서 호스팅하기 때문에 문제가되지 않는다고 생각합니다.이 스크립트에는 다른 것이 있습니다 ... – Gobi

은 내가 따랐다

답변

관련 문제