Javascript 前端合成图片

郑凯文 Javascript
阅读 (364) 2020-03-27 16:24:23
已经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
返回
返回顶部