用html5的canvas生成圖片並儲存到本地
阿新 • • 發佈:2019-01-25
前端的程式碼:
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; }
傳送到後臺的程式碼:
這塊需要注意的是,ajax傳送請求需要設定為type:‘post’,預設的是Get傳送,這樣傳送的位元組就不受限制了,不然圖片稍大一點就會截斷了。
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",type:'post', data: { data: b64, name: i.toString() }, success: function () { //alert('OK'); } }); }
後臺接收的程式碼:
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) { } }
最後生成的結果:
生成圖片的效果很棒,不失真,而且透明的,不需要後期處理。