用html5的canvas生成图片并保存到本地

时间2024-01-25 12:40:25发布访客分类HTML浏览1053

导读：收集整理的这篇文章主要介绍了html5教程-用html5的canvas生成图片并保存到本地，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。前端的代...

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

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

前端的代码：

[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;
}
发送到后台的代码：

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

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

AJAX div HTML html5 Map post-format-gallery Rest

若转载请注明出处：用html5的canvas生成图片并保存到本地
本文地址： https://pptw.com/jishu/586526.html

进程和线程 TIPTOP――4GL颜色相关设置