canvas生成图片并保存到手机上

Html


           
        
        

            
        

Js

function draw(){
                    var canvas = document.getElementById('canvas');
                    var ctx = canvas.getContext("2d");
                    var imgBg = new Image();
                    imgBg.src = '/static/home/img/img53.png'
                    window.onload = function(){
//                  	设置背景色
                        ctx.fillStyle="#ededed";
                        ctx.fillRect(0, 0, 300, 400);
                        //文字字体和颜色
                        ctx.fillStyle = "#000000";
                        ctx.font="20px";
                        ctx.drawImage(imgBg,130,50);
                        ctx.fillText("canvas生成图片测试",100,30);
                        ctx.fillText("长按保存到手机",120,120);
                        //生成的data的路径,可以通过php生成图片存到数据库,单存data路径不合适,高清图片情况下会出现图片的残缺
                        var srccc = canvas.toDataURL("image/png");
                        $("#img").attr("src",srccc);
                    }
                }
                
                draw();

canvas不是很熟悉，不经常用，这是在网上找的一段方法修改了一下直接用的，经测试没有问题，具体出处找不到了。

这里是canvas生成图片，展示的是生成的图片，canvas被隐藏了起来，手机上长按图片会自动唤醒保存到手机和发送给朋友功能的。