html5 canvas如何选择本地图片,用html5的canvas生成图片并保存到本地

前端的代码：

[javascript]

function drawArrow(angle)

{

//Init canvas

var canvas = $('#cv_Arrow')[0];

var context = canvas.getContext('2d');

var width = canvas.width;

var height = canvas.height;

context.clearRect(0, 0, width, height);

//Rotate

var distance = iconSize / 2 * Math.sqrt(2) * Math.sin(angle * Math.PI / 180 / 2) * 2;

var degree = 180 - 45 - (180 - angle) / 2;

var x = distance * Math.sin(degree * Math.PI / 180);

var y = distance * Math.cos(degree * Math.PI / 180);

context.translate(x, -y);

var angleInRadians = angle * Math.PI / 180;

context.rotate(angleInRadians);

//Draw arrow

context.fillStyle = 'rgb(0,0,0)'; //Black

context.lineWidth = 1;

context.strokeStyle = "#000000"; //Black

context.lineCap = 'round'; //Circle angle

context.lineJoin = 'round';

context.beginPath();

context.moveTo(iconSize / 2, border);

context.lineTo(border, iconSize - border);

context.lineTo(iconSize / 2, iconSize / 2);

context.fill();

context.stroke();

context.closePath();

context.save();

context.restore();

context.fillStyle = 'rgb(255,255,255)'; //White

context.lineWidth = 1;

context.strokeStyle = "#000000";

context.lineCap = 'round';

context.lineJoin = 'round';

context.beginPath();

context.moveTo(iconSize / 2, border);

context.lineTo(iconSize - border, iconSize - border);

context.lineTo(iconSize / 2, iconSize / 2);

context.fill();

context.stroke();

context.closePath();

context.save();

_canvas = canvas;

}

发送到后台的代码：

[javascript]

for (var i = 0; i < 360; i++)

{

drawArrow(1);

var data = _canvas.toDataURL();

//删除字符串前的提示信息 "data:image/png;base64,"

var b64 = data.substring(22);

$.ajax({ url: "RotateCanvas.aspx", data: { data: b64, name: i.toString() }, success:

function ()

{

//alert('OK');

}

});

}

后台接收的代码：

[csharp]

if (Request["name"] != null)

{

string name = Request["name"];

String savePath = Server.MapPath("~/images/output/");

try

{

FileStream fs = File.Create(savePath + "/" + name + ".png");

byte[] bytes = Convert.FromBase64String(Request["data"]);

fs.Write(bytes, 0, bytes.Length);

fs.Close();

}

catch (Exception ex)

{

}

}

最后生成的结果：

生成图片的效果很棒，不失真，而且透明的，不需要后期处理。