1. 这是我之前做的一个关于文字图片合成的代码，供大家参考，不足支出还望体谅；具体的注释在代码里都有，有什么不懂了可以留言互相交流。
    <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta content="yes" name="apple-mobile-web-app-capable">
  6.     <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
  7.     <title>元宵节祝福神器</title>
  8.     <style>
  9.         html,body,h2,p,ul,li,input,img,div,button,section,header,footer,canvas{margin:0;padding: 0;  }
  10.         body{font:0.14rem "楷体","Microsoft YaHei","黑体","宋体","Arial",sans-serif;color:#333;}//移动端有默认字体，这样设置了也不起左右，在此写上只是习惯
  11.         button{outline: none;}
  12.         ul,li{list-style: none;}
  13.         @media only screen and (min-width: 320px){
  14.             html {
  15.                 font-size: 42.667px!important;
  16.             }
  17.         }
  18.         @media only screen and (min-width: 360px){
  19.             html {
  20.                 font-size: 48px!important;
  21.             }
  22.         }
  23.         @media only screen and (min-width: 375px){
  24.             html {
  25.                 font-size: 50px!important;
  26.             }
  27.         }
  28.         @media only screen and (min-width: 412px){
  29.             html {
  30.                 font-size: 54.933px!important;
  31.             }
  32.         }
  33.         @media only screen and (min-width: 414px){
  34.             html {
  35.                 font-size: 55.2px!important;
  36.             }
  37.         }
  38.         .clearfix:after{
  39.             content:"";
  40.             display: block;
  41.             height:0;
  42.             clear:both;
  43.             overflow:hidden;
  44.             visibility:hidden;
  45.         }
  46.         h2{
  47.             height:1rem;
  48.             line-height:1rem;
  49.             font-size:0.4rem;
  50.             background: #c2110c;
  51.             color:#fff;
  52.             text-align: center;
  53.         }
  54.         .img-list{
  55.             padding:0 0.4rem 0.4rem;
  56.         }
  57.         .img-list li.on{
  58.             border-color: #c2110c;
  59.             color:#c2110c;
  60.         }
  61.         .img-list li{
  62.             width:2rem;
  63.             height:0.4rem;
  64.             line-height:0.44rem;
  65.             text-align: center;
  66.             font-size: 0.2rem;
  67.             float: left;
  68.             margin-top:0.28rem;
  69.             margin-right: 0.28rem;
  70.             -webkit-border-radius:0.08rem;
  71.             -moz-border-radius:0.08rem;
  72.             border-radius:0.08rem;
  73.             border:1px solid #333;
  74.         }
  75.         .img-list li:nth-child(3n){
  76.             margin-right:0;
  77.         }
  78.         .operat{
  79.             margin:0 0.4rem 0.4rem;
  80.         }
  81.         .operat input{
  82.             width:3.4rem;
  83.             height:0.4rem;
  84.             font-size: 0.25rem;
  85.             -webkit-border-radius:0.08rem;
  86.             -moz-border-radius:0.08rem;
  87.             border-radius:0.08rem;
  88.             padding: 0 0.4rem;
  89.             outline: none;
  90.             border:1px solid #333;
  91.         }
  92.         .operat button{
  93.             height:0.41rem;
  94.             width:1rem;
  95.             border:none;
  96.             background: #c2110c;
  97.             color:#fff;
  98.             -webkit-border-radius:0.1rem;
  99.             -moz-border-radius:0.1rem;
  100.             border-radius:0.1rem;
  101.         }
  102.         .operat p{
  103.             margin:0.2rem;
  104.             text-align:right;
  105.         }
  106.     </style>
  107. </head>
  108. <body>
  109. <header>
  110.     <h2>元宵节祝福神器</h2>
  111. </header>
  112. <section>
  113.     <div class="img-list">
  114.         <ul class="clearfix">
  115.             <li onclick="changeImg(1)" class="on">金狮闹春</li>
  116.             <li onclick="changeImg(2)">彩灯送福</li>
  117.             <li onclick="changeImg(3)">合家团圆</li>
  118.             <li onclick="changeImg(4)">鸡闹元宵</li>
  119.             <li onclick="changeImg(5)">共度佳节</li>
  120.             <li onclick="changeImg(6)">喜迎元宵</li>
  121.             <li onclick="changeImg(7)">诗画送福（1）</li>
  122.             <li onclick="changeImg(8)">诗画送福（2）</li>
  123.             <li onclick="changeImg(9)">元宵佳节</li>
  124.         </ul>
  125.     </div>
  126.     <div class="operat">
  127.         <input id="name" type="text" placeholder="请输入您的名字" maxlength="10">
  128.         <button class="pro" onclick="drawImage()">生成</button>
  129.         <p>温馨提示：长按图片可保存到手机或直接发送给朋友！</p>
  130.     </div>
  131.     <div class="before" style="width:100%;height:100%;text-align: center">
  132.         <img id="imgbox" src="data:images/1.png" alt="" style="width:80%;">
  133.     </div>
  134.  
  135.     <div class="pic">
  136.         <canvas id="myCanvas" style="display: none;">
  137.             您的浏览器不支持canvas
  138.         </canvas>
  139.     </div>
  140.  
  141. </section>
  142. <script>
  143.     var data = [//将每张图片上字体的样式、大小、在图片上的位置记录下来，以便于换到不同图片时获取所需信息（移动端字体样式并不能这样设置，字体样式只适合PC端）
  144.         {"family":"微软雅黑","size":"0.053","x":"0.291","y":"0.515","color":"#fa112e"},
  145.         {"family":"微软雅黑","size":"0.075","x":"0.5","y":"0.645","color":"#030000"},
  146.         {"family":"微软雅黑","size":"0.053","x":"0.5","y":"0.645","color":"#fff"},
  147.         {"family":"微软雅黑","size":"0.053","x":"0.5","y":"0.545","color":"#030000"},
  148.         {"family":"微软雅黑","size":"0.053","x":"0.5","y":"0.755","color":"#030000"},
  149.         {"family":"微软雅黑","size":"0.053","x":"0.2","y":"0.57","color":"#030000"},
  150.         {"family":"微软雅黑","size":"0.053","x":"0.72","y":"0.41","color":"#ed3a50"},
  151.         {"family":"微软雅黑","size":"0.053","x":"0.5","y":"0.54","color":"#030000"},
  152.         {"family":"微软雅黑","size":"0.053","x":"0.5","y":"0.795","color":"#030000"}
  153.     ]
  154.     function changeImg(id){
  155.         var imgbox = document.getElementById("imgbox");
  156.         imgbox.src = "images/"+id+".png";//将图片名称设置为比较简单的名称方便与通过id切换
  157.         var liList = document.getElementsByTagName("li");
  158.         for(var i = 0; i < liList.length; i++){
  159.             liList[i].className = "";
  160.         }
  161.         liList[id-1].className = "on";
  162.     }
  163.     var canvas = document.getElementById("myCanvas");
  164.     function drawImage() {
  165.         var name = document.getElementById("name").value;
  166.         var html = "";
  167.         if(name){
  168.             var on = document.getElementsByClassName("on")[0];
  169.             var liList = document.getElementsByTagName("li");
  170.             var index = getIndex(on,liList);  //获取有on类名的li
  171.             var  clientWidth = getWidth();　　//获取屏幕宽度用于canvas宽度自适应移动端屏幕
  172.             canvas.width = 2*clientWidth;　　//由于手机屏幕时retina屏，都会多倍渲染，在此只设置2倍，如果直接设置等于手机屏幕，会导致生成的图片分辨率不够而模糊
  173.             canvas.height = 2*clientWidth*667/375;
  174.             var context = canvas.getContext("2d");
  175.             var imgbox = document.getElementById("imgbox");
  176.             var num = index + 1;
  177.             var src = "images/"+num+".png";
  178.             var img = new Image();//创建图片对象，用于在canvas中渲染
  179.             img.src=src;
  180.             var w = 2*clientWidth;
  181.             img.onload = function(){ //当图片加载成功以后再进行下一步动作，如果不加这句，会生成黑图
  182.                 context.drawImage(img, 0, 0, w, w*667/375);//按设计稿图片比例渲染图片高度
  183.                 var font = "600 " + data[index].size*w + "px " + data[index].family;//文字大小也得按照分辨率变化，类似使用rem
  184.                 context.font = font;
  185.                 context.textAlign = "center";
  186.                 context.fillStyle = data[index].color;
  187.                 if(index == 0){
  188.                     var x = w*data[index].x;
  189.                     var oy = data[index].y*w*667/375;
  190.                     for(var i = 0; i < name.length; i++){
  191.                         var y = oy + 44*i;
  192.                         context.fillText(name[i],x,y);
  193.                     }
  194.                 }else if(index == 5){//当文字时竖向显示的时候，以中间为基准，向上向下一行插入一个字
  195.                     var x = w*data[index].x;
  196.                     var oy = data[index].y*w*667/375;
  197.                     for(var i = 0; i < name.length; i++){
  198.                         var y = oy + 44*i;
  199.                         context.fillText(name[i],x,y);
  200.                     }
  201.                 }else{
  202.                     context.fillText(name,w*data[index].x,data[index].y*w*667/375);
  203.                 }
  204.                 var downloadImg = canvas.toDataURL("image/jpeg");
  205.                 imgbox.src = downloadImg;
  206.             }
  207.         }else{
  208.             alert("请输入您的名字！");
  209.         }
  210.  
  211.     }
  212.     function getWidth(){
  213.         if(window.innerWidth){
  214.             return window.innerWidth;
  215.         }
  216.         else{
  217.             if(document.compatMode == "CSS1Compat"){
  218.                 return document.documentElement.clientWidth;
  219.             }
  220.             else{
  221.                 return document.body.clientWidth;
  222.             }
  223.         }
  224.     }
  225.  
  226.     function getIndex(current,obj){
  227.         var length = obj.length
  228.         for(var i = 0; i<length; i++) {
  229.             if (obj[i] == current) {
  230.                 return i;
  231.             }
  232.         }
  233.     }
  234. </script>
  235. <script src="http://zishu010.com/JS/baidu_statistics.js?v=2.0.5"></script>
  236. </body>
  237. </html>

移动端canvas文字图片合成并生成图片（canvas宽度自适应移动端屏幕）的更多相关文章

  1. Canvas 实现图片合成并下载合成图片

    现在经常会遇到那种带二维码的推广图片,如下图所示: 1是整张推广图的背景,2是二维码.这种图片的背景是保持不变的,里面的二维码是变化的.所以我们需要把二维码单独生成然后与背景合并. 我们可以通过can ...

  2. Html5 Canvas 实现图片合成

    多个图片合成一张 <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  3. android 文字图片合成

    引用:http://blog.csdn.net/cq361106306/article/details/8142526 两种方法: 1.直接在图片上写文字 String str = "PIC ...

  4. JS图片宽度自适应移动端

    $(function(){ $("#d-intro").find("img").each(function () {                $(this ...

  5. canvas转图片

    <script>   var canvas, context2D, canvasimg, context2Dimg ,fontSize = 100;       window.onload ...

  6. canvas文字自动换行、圆角矩形画法、生成图片手机长按保存、方形图片变圆形

    canvas的文字自动换行函数封装 // str:要绘制的字符串 // canvas:canvas对象 // initX:绘制字符串起始x坐标 // initY:绘制字符串起始y坐标 // lineH ...

  7. canvas图片合成中的坑

    需求 要用代码来实现多张外部图片和文字的合并而且要上传到七牛云,再将图片链接通过客户端分享出去.图片背景需要支持用户自定义更换. 实现方案 在一个canvas上多次调用drawImage函数,分别绘制 ...

  8. PHP图片加水印文字及图片合成缩放

    <?php //图片添加文字水印 /*$bigImgPath = 'background.png'; $img = imagecreatefromstring(file_get_contents ...

  9. 使用canvas给图片添加水印， canvas转换base64,,canvas，图片，base64等转换成二进制文档流的方法，并将合成的图片上传到服务器,

    一,前端合成带水印的图片 一般来说,生成带水印的图片由后端生成,但不乏有时候需要前端来处理.当然,前端处理图片一般不建议,一方面js的处理图片的方法不全,二是有些老版本的浏览器对canvas的支持度不 ...

随机推荐

  1. MFC 中MessageBox 显示在所有窗口的最上面

    int MessageBox(   HWND hWnd,          // handle of owner window   LPCTSTR lpText,     // address of  ...

  2. ORM项目中小知识点积累

    申明:一下内容均建立在零基础小白的角度上,大佬们求放过~ 1.如何通过类建立外键关联 2.模板语言固定搭配 3.浏览器报错处理 4.后台取值方式 5.外键管理修改相关操作 6.两种(给后台偷偷传递消息 ...

  3. pywin32安装教程

    下载 pywin32-224-cp37-cp37m-win32.whl 放在 Scripts 目录下,然后cmd 安装 pip install pypiwin32 即可成功 此次安装成功对应的pyth ...

  4. CentOS6下4网口绑定双IP

    1. 基础信息介绍    4个物理网口分别是:eth0,eth1(集成网卡),eth2,eth3(外置网卡)    其中,    内置网卡eth0和eth1绑定到bond0(192.168.224.2 ...

  5. 供Linux学习使用的在线模拟系统

    前言 我只是一名搬运工. 最近想要找一个linux服务器用于调试shell脚本,但是公司服务器又只能内网访问,外网无法使用.对安装VMWARE+Linux镜像觉得繁琐.查找了一下资料.找到了几个在线模 ...

  6. 用spring的@Scheduled实现定时任务

    先在spring的配置文件中添加扫描 在applicationContext.xml中添加  <task:annotation-driven/>,我用的是idea有提示功能 选择第一个后会 ...

  7. SSM商城项目（十三）

    1.   学习计划 1.订单系统 2.提交订单 3.MyCAT 2.   订单系统 2.1. 功能分析 1.在购物车页面点击“去结算”按钮跳转到订单确认页面. a)         展示商品列表 b) ...

  8. IoU

    IoU #include <cstdio> #include <algorithm> #define re(i,a,b) for(int i=a;i<=b;i++) us ...

  9. 自制EF（iShare Demo版）

    由于公司使用的所有技术都比较倾向于使用原生,不怎么借用其他第三方框架(无论是前端布局,样式,到后台的框架).公司也算比较小型的没有太大的项目 可以让我们进行团队合作项目,几乎是一人接手一个项目.然后自 ...

  10. mysql学习笔记--遇到的坑

    一.navcat 连接不支持密码输入 1. 先通过命令行进去mysql的root账户 mysql -uroot -p'password' 2. 更改加密方式 alter user 'root'@'lo ...