用JavaScript将Canvas内容转化成图片的方法_js canvas转图片

使用JavaScript将图片拷贝进画布

要想将图片放入画布里，我们使用canvas元素的drawImage方法：

// Converts image to canvas; returns new canvas element
function convertImageToCanvas(image) {
	var canvas = document.createElement("canvas");
	canvas.width = image.width;
	canvas.height = image.height;
	canvas.getContext("2d").drawImage(image, 0, 0);

	return canvas;
}

这里的0, 0参数画布上的坐标点，图片将会拷贝到这个地方。

用JavaScript将画布保持成图片格式

如果你的画布上的作品已经完成，你可以用下面简单的方法将canvas数据转换成图片格式：

// Converts canvas to an image
function convertCanvasToImage(canvas) {
	var image = new Image();
	image.src = canvas.toDataURL("image/png");
	return image;
}

这段代码就能神奇的将canvas转变成PNG格式！

 HTML结构

我们需要在html页面上创建3个元素：

• 一个canvas元素，用于绘制图片，实际绘图在js文件中完成。
• 一个用于触发绘图操作的按钮。
• 一个用于上传在canvas中绘制好的图片的按钮。

<form id="form1" runat="server">
    <div align="center" class="i-canvas">
        <canvas id="myCanvas" width="500" height="300"></canvas>
        <ul>
            <li><button οnclick="javascript:DrawPic();return false;">开始画图</button></li>
            <li><button οnclick="javascript:UploadPic();return false;">上传到服务器</button></li>
        </ul>
    </div>
</form>                               

 JAVASCRIPT

在js代码中要完成两项工作：在canvas画布中绘制图像和使用ajax来上传图片。我们写两个函数来分别完成这两项工作。一个hisDrawPic()函数，用于绘图。一个是UploadPic()函数，用于上传图片。

function DrawPic() {
    
    // Get the canvas element and its 2d context
    var Cnv = document.getElementById('myCanvas');
    var Cntx = Cnv.getContext('2d');
        
    // Create gradient
    var Grd = Cntx.createRadialGradient(100, 100, 20, 140, 100, 230);
    Grd.addColorStop(0, "red");
    Grd.addColorStop(1, "black");
    
    // Fill with gradient
    Cntx.fillStyle = Grd;
    Cntx.fillRect(0, 0, 300, 200);
    
    // Write some text
    for (i=1; i<10 ; i++)
    {
        Cntx.fillStyle = "white";
        Cntx.font = "36px Verdana";
        Cntx.globalAlpha = (i-1) / 9;
        Cntx.fillText("Codicode.com", i * 3 , i * 20);
    }
}
    
function UploadPic() {
    
    // Generate the image data
    var Pic = document.getElementById("myCanvas").toDataURL("image/png");
    Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "")

    // Sending the image data to Server
    $.ajax({
        type: 'POST',
        url: 'Save_Picture.aspx/UploadPic',
        data: '{ "imageData" : "' + Pic + '" }',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (msg) {
            alert("Done, Picture Uploaded.");
        }
    });
}                                
                            

 服务器端代码

在本例子中我们使用 Asp.Net C#来作为服务器端语言，PHP和JAVA版本的代码基本类似，相信你比我更熟悉它们。^_^!!

using System;
using System.Web;
using System.IO;
using System.Web.Script.Services;
using System.Web.Services;
    
[ScriptService]
public partial class Save_Picture : System.Web.UI.Page
{
    [WebMethod()]
    public static void UploadPic (string imageData)
    {
        string Pic_Path = HttpContext.Current.Server.MapPath("MyPicture.png");
        using (FileStream fs = new FileStream(Pic_Path, FileMode.Create))
        {
            using (BinaryWriter bw = new BinaryWriter(fs))
            {
                byte[] data = Convert.FromBase64String(imageData);
                bw.Write(data);
                bw.Close();
            }
        }
    }
}