脚本宝典收集整理的这篇文章主要介绍了html5教程-用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) 
    { 
    } 
} 
最后生成的结果：

 

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

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的html5教程-用html5的canvas生成图片并保存到本地全部内容，希望文章能够帮你解决html5教程-用html5的canvas生成图片并保存到本地所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。