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

Html

<div class="canvasImagesd" style="margin: 0 auto;width: 300px;height: 400px;position: fixed;z-index: 9999;background-color: #ededed;display: none;">
           <canvas id="canvas" style="width: 100%;height: 100%;"></canvas>
        </div>
        <div>
            <img id="img" style="width: 300px;height: 400px; display:block; margin: 0 auto;" src="#" alt="...">
        </div>

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被隐藏了起来，手机上长按图片会自动唤醒保存到手机和发送给朋友功能的。