js+canvas 图片+文字合成

「爱情、让人受尽委屈。」 2022-03-31 14:52 417阅读 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 条评论，417人围观）

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

相关阅读

相关 java 图片合成红色失真_java 图片合成　解决图片失真问题

源代码/\\ \ \ @param filesrc \ @param logosrc \ @param outsrc \ @param x 位置 \ @param

柔光的暖阳◎/ 2022年11月03日 04:09/ 0 赞/ 181 阅读

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

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

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

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

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

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

相关 Toast显示文字、图片、文字+图片

1、显示文字： Toast.makeText(this, "文字显示", Toast.LENGTH_LONG).show(); 2、显示图片： Toast

素颜马尾好姑娘i/ 2022年05月29日 03:22/ 0 赞/ 287 阅读

相关图片合成显示

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

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

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

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

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

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

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

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

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

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

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

相关图片合成工具

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

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

相关 java 图片合成

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

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