js+canvas 图片+文字合成

「爱情、让人受尽委屈。」 2022-03-31 14:52 441阅读 0赞

<style>  
     img \{  
        border: solid 1px \#ddd;  
     \}  
    </style>

主体：

<div align="center">   
        <h3>图片+文字合成</h3>  
        <img src="images/bg.png" width="300">   
        <img src="images/himg.png" width="110">   
        <img src="images/QR.png" width="146">   
        <div style="position: absolute;left: 800px;top: 100px;width: 300px;padding: 10px;border: 1px solid \#EEEEEE;">  
           <strong>文字：</strong>  
           <div style="padding: 10px 0;">用户名：中国好</div>  
           <div>Tel：18068763980</div>  
        </div>  
     </div>  
     <div id="imgBox" align="center" style="margin: 10px;">  
        <input type="button" value="一键合成" οnclick="hecheng()">  
     </div>

js部分：

<script>  
            function hecheng() \{  
                draw(function() \{  
                    document.getElementById('imgBox').innerHTML = '<p style="padding:10px 0">合成图片成功！可以鼠标另存图片查看我是否是一张图片~~！</p><img src="'+base64\[0\]+'" width="300">';  
                \})  
            \}  
            var data = \[ 'images/bg.png', 'images/himg.png',  
                    'images/QR.png'\], base64 = \[\];  
            var position = \[\[0,64,216,184,184\],\[0,763,1005,800,840\]\]; //position\[0\]为left值，position\[1\]为top值（图片相对位置），依次为图片1-图片3、文字1-文字2  
            var size = \[\[750,110,146\],\[1334,110,146\]\];//size\[0\]为width值，size\[1\]为height值（图片相对大小），依次为图片1-图片3  
            var text = \['中国好','18068763980'\];//文字内容  
            function draw(fn) \{  
                var c = document.createElement('canvas'), ctx = c  
                        .getContext('2d'), len = data.length;  
                //背景图宽高（第一张为背景图）  
                c.width = size\[0\]\[0\];  
                c.height = size\[1\]\[0\];  
                ctx.rect(0, 0, c.width, c.height);  
                ctx.fillStyle = '\#fff';  
                ctx.fill();  
                function drawing(n) \{  
                    if (n < len) \{  
                        var img = new Image;  
                        img.src = data\[n\];  
                        if(n==0)\{  
                          img.onload = function() \{  
                            ctx.drawImage(img, position\[0\]\[n\], position\[1\]\[n\], size\[0\]\[n\], size\[1\]\[n\]);//(img\_name,left,top,width,height)  
                            ctx.font="25px microsoft yahei";//设置画笔的字体大小和格式  
                            ctx.fillStyle = "rgba(0,0,0,1)";//设置字体的颜色  
                            ctx.fillText(text\[0\],position\[0\]\[len\], position\[1\]\[len\]);//将文字信息画在画布上，按照x,y的坐标，在手机上坐标不是很准确  
                            ctx.fillText(text\[1\],position\[0\]\[len+1\], position\[1\]\[len+1\]);  
                            drawing(n + 1);//递归  
                          \}   
                        \}else if(n==1)\{  
                          img.onload = function() \{  
                            ctx.drawImage(img, position\[0\]\[n\], position\[1\]\[n\], size\[0\]\[n\], size\[1\]\[n\]);  
                            drawing(n + 1);//递归  
                          \}   
                        \}else\{  
                          img.onload = function() \{  
                            ctx.drawImage(img, position\[0\]\[n\], position\[1\]\[n\], size\[0\]\[n\], size\[1\]\[n\]);  
                            drawing(n + 1);//递归  
                          \}   
                        \}  
                          
                    \} else \{  
                        //保存生成作品图片  
                        base64.push(c.toDataURL("image/jpeg", 0.8));  
                        //alert(JSON.stringify(base64));  
                        fn();  
                    \}  
                \}  
                drawing(0);  
            \}  
        </script>

图片：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjE3ODQw_size_16_color_FFFFFF_t_70][]![20190103173009497.png][]![20190103173034687.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjE3ODQw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190103172917120.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjE3ODQw,size_16,color_FFFFFF,t_70
[20190103173009497.png]: https://img-blog.csdnimg.cn/20190103173009497.png
[20190103173034687.png]: /images/20220331/b3e7376d972a4bcc827edbb7c38ff886.png

发表评论取消回复

表情：

评论列表（有 0 条评论，441人围观）

还没有评论，来说两句吧...

相关阅读

相关图片合成YFFotoMix

using System; using System.Collections.Generic; using System.Drawing; us

灰太狼/ 2023年10月04日 09:39/ 0 赞/ 15 阅读

相关 canvas合成任意数量图片、合成二维码加文字封装处理

代码已上传至github github代码地址：https://github.com/Miofly/mio.git <!DOCTYPE html> <h

绝地灬酷狼/ 2023年03月13日 03:24/ 0 赞/ 36 阅读

相关高效率OCR场景文字图片合成工具发布！

OCR，光学字符识别（OPTICAL CHARACTER RECOGNITION），作为计算机视觉领域的经典问题之一它指对图像中的文字进行检测识别（包括文字检测+文字识别

ゝ一纸荒年。/ 2022年10月22日 02:54/ 0 赞/ 154 阅读

相关移动端canvas合成图片，填充文字自动换行

今天用canvas合成带有微信公众号二维码和祝福语的春节贺卡 ![这里写图片描述][70] 由于代码都是原生的没有引入其他库，所以直接将对应部分贴出来吧。 html

骑猪看日落/ 2022年05月31日 07:45/ 0 赞/ 328 阅读

相关图片合成显示

[OpacityMask 圆角图片、异形图片的合成][OpacityMask] [OpacityMask]: https://blog.csdn.net/a28967208

ゞ浴缸里的玫瑰/ 2022年05月11日 00:44/ 0 赞/ 267 阅读

相关 Python PIL图片合成,图片合并,添加文字集合

!/usr/bin/env python encoding: utf-8 """ @author: morgan @time: 1/2

曾经终败给现在/ 2022年04月23日 05:50/ 0 赞/ 380 阅读

相关 js+canvas 图片+文字合成

<style> img \{ border: solid 1px \ddd; \} </style> 主体： <

「爱情、让人受尽委屈。」/ 2022年03月31日 14:52/ 0 赞/ 442 阅读

相关利用GD库将文字和图片合成新图片

<?php $im =imagecreate(600,200);//画图片 $background_color = ImageColorAllocate

墨蓝/ 2022年01月26日 15:39/ 0 赞/ 317 阅读

相关图片合成工具

maven中添加 <dependency> <groupId>cn.hutool</groupId> <artifactId>hutool-all</artifac

浅浅的花香味﹌/ 2021年09月27日 19:34/ 0 赞/ 432 阅读

相关 java 图片合成

1. 纵向拼接多张图片 2. 横向拼接多张图片 3. 用字节数组合成多张图片　ps:（要用Base64 encoder decoder） /

蔚落/ 2021年09月27日 16:14/ 0 赞/ 427 阅读