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

r囧r小猫 2022-02-02 02:39 566阅读 0赞

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