HTML5的canvas js内部怎么获取不到toDataURL("image/jpeg")数据呢

会飞的蝌蚪 发布于 2013/10/23 20:42
阅读 9K+
收藏 0

Serverless 架构就不要服务器了?>>>

<body>
    <div>
        <canvas id="canvas" style="width: 100; height: 100;"></canvas>
        <button onclick="transform();">draw</button>
    </div>
    <script type="text/javascript">
var canvas=document.getElementById("canvas");
function transform(){
    var context = canvas.getContext("2d");
    context.beginPath();
    context.moveTo(100, 150);
    context.lineTo(450, 50);
    context.lineWidth = 10;
    context.strokeStyle ="#ff0000";
    context.stroke();
    alert(context.toDataURL());
}
</script>
</body>


加载中
0
一剪梅i
一剪梅i
你这个是搞错对象了吧。这个是canvas实例的方法
toDataURL method

Returns the content of the current canvas as an image that you can use as a source for another canvas or an HTML element (such as img).
HTML5 A vocabulary and associated APIs for HTML and XHTML, Section 4.8.10
Syntax
var retval = canvas.toDataURL(type, jpegquality);
Parameters
type [in, optional]
Type: string
The standard MIME type for the image format to return. If you do not specify this parameter, the default value is a PNG format image.
jpegquality [in, optional]
Type: number
The quality level of a JPEG image in the range of 0.0 to 1.0.
Return value
Type: string
The image data.
Standards information
HTML5 A vocabulary and associated APIs for HTML and XHTML, Section 4.8.10
Remarks
Typical values for the type parameter are image/png or image/jpg.
Examples
The following code example draws some graphics on a canvas and then uses toDataURL to make an image that is assigned to an img object.
HTML

<html>
<head>
    <title>toDataURL example</title>
  <script type="text/javascript">
      function draw() {
          // Create some graphics.    
          var canvas = document.getElementById("MyCanvas");
          if (canvas.getContext) {
              var ctx = canvas.getContext("2d");
              ctx.fillStyle = "white";
              ctx.beginPath();
              ctx.rect(5, 5, 300, 250);
              ctx.fill();
              ctx.stroke();
              ctx.arc(150, 150, 100, 0, Math.PI, false);
              ctx.stroke();
          }
      }
      function putImage() {
          var canvas1 = document.getElementById("MyCanvas");
          if (canvas1.getContext) {
              var ctx = canvas1.getContext("2d");                // Get the context for the canvas.
              var myImage = canvas1.toDataURL("image/png");      // Get the data as an image.
          }
          var imageElement = document.getElementById("MyPix");  // Get the img object.
          imageElement.src = myImage;                           // Set the src to data from the canvas.

      }
  </script>
</head>
<body onload="draw()" >
      <div>
        <button onclick="putImage()">Copy graphic using toDataURL</button>        
      </div>
      <div>
        <canvas id="MyCanvas" width="400" height="400" >This browser or document mode doesn't support canvas</canvas>
        <img id="MyPix" />
      </div>
  </body>
</html>
一剪梅i
一剪梅i
回复 @不能用英文啊 : 这http://technet.microsoft.com/zh-cn/library/hh453006 去w3c官网的最权威
会飞的蝌蚪
会飞的蝌蚪
在哪儿找的资料呢 呢 哥哥
返回顶部
顶部