Question

朋友们，我已经按照本教程进行了操作：http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/

我创建了一个具有不同概念的相同程序（我使用拖放操作，如果将图像拖放到画布上，它将在画布中绘制该图像）。但现在我无法使用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>

Answer 1

问题是您的图片托管在与您的示例不同的域上。同域安全策略适用于访问画布的dataURL，因此只要添加外部图像，就无法获得dataURL。

我无法在kineticJs中使用toDataURL保存画布

1 个答案: