别啰嗦了！
代码最为直接点！！！
1. <html>
2. <meta charset="utf-8"/>
3. <meta http-equiv="X-UA-Compatible" content="chrome=1">
4. <title>canvas转化图片</title>
5. <head>
6. <script>
7. window.onload = function() {
8. draw();
9. saveButton = document.getElementById("saveImageBtn");
10. bindButtonEvent(saveButton, "click", saveImageInfo);
11. dlButton = document.getElementById("downloadImageBtn");
12. bindButtonEvent(dlButton, "click", saveAsLocalImage);
13. };
14. function draw(){
15. canvas = document.getElementById("thecanvas");
16. ctx = canvas.getContext("2d");
17. ctx.fillStyle = "rgba(125, 46, 138, 0.5)";
18. ctx.fillRect(25,25,100,100);
19. ctx.fillStyle = "rgba( 0, 146, 38, 0.5)";
20. ctx.fillRect(58, 74, 125, 100);
21. ctx.fillStyle = "rgba( 0, 0, 0, 1)"; // black color
22. ctx.fillText("Gloomyfish - Demo", 50, 50);
23. }
24.
25. function bindButtonEvent(element, type, handler)
26. {
27. if(element.addEventListener) {
28. element.addEventListener(type, handler, false);
29. } else {
30. element.attachEvent('on'+type, handler);
31. }
32. }
33. function saveImageInfo ()
34. {
35. mycanvas = document.getElementById("thecanvas");
36. image = mycanvas.toDataURL("image/png");
37. w=window.open('about:blank','image from canvas');
38. <img src='"+image+"' alt='from canvas'/>");
39. }
40. function saveAsLocalImage () {
41. myCanvas = document.getElementById("thecanvas");
42. image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
43. window.location.href=image;
44. }
45. </script>
46. </head>
47. <body bgcolor="#E6E6FA">
48. <div>
49. <canvas width=350 height=350 id="thecanvas"></canvas>
50. <button id="saveImageBtn">保存图片</button>
51. <button id="downloadImageBtn">下载吧</button>
52. </div>
53. </body>
54. </html>
