Javascript 前端合成图片

阅读 (252)
已经2020年了,前端早就可以通过canvas绘图了

如果后端偷懒,非要在前端合成图片,并提供用户长按保存图片的功能,那单纯通过canvas绘制好图片,手机端用户是无法长按保存图片的,PC端右键可以右键另存图片

可以用canvas.toDataURL("image/png")将绘图转成base64图片内容,存放到<img /> src标签上

<body>
     <canvas style="display: none;" id="canvas"></canvas>
     <div>
         <img id="img" style="width: 300px;height: 500px; display:block; " src="default.png" alt="...">
     </div>
</body>
<script>
    function draw(){
        var canvas = document.getElementById('canvas');
        canvas.width=300; // 这里不写宽高的话,画布会被拉升,canvas有默认宽高
        canvas.height=500; // 或者写到canvas标签上 <canvas style="display: none;" width="500" height="706" id="canvas"></canvas>
        var ctx = canvas.getContext("2d");

        var imgBg = new Image();
        imgBg.src = 'cert.png'
        imgBg.onload = function () {
            ctx.drawImage(imgBg,0,0, 300, 500); // 填充背景图
            ctx.fillStyle = "#333"; //文字字体和颜色
            ctx.font = "14px"; // 文字大小
            ctx.fillText("canvas生成图片测试",100,300);
            ctx.fillText("长按保存到手机",100,330);
            //生成的data的路径,可以通过php生成图片存到数据库,单存data路径不合适,高清图片情况下会出现图片的残缺
            var srccc = canvas.toDataURL("image/png");
            $("#img").attr("src",srccc);
        };


    }

    draw();
</script>

 

更新于:2020-03-27 16:30:45

留言

发表评论

标记为*的字段是必填项(邮箱地址不会被公开), 由于国内舆论控制, 评论需要管理员审核通过方可展示

返回顶部