熊猫记仇表情在线生成代码

前言

今天闲的无聊,试着用Canvas做了时下比较流行的熊猫记仇不多说,直接放代码

DEMO

记仇

代码

成品

<!DOCTYPE html>
<html>
<head>
  <title>在线制作熊猫记仇表情包</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="shortcut icon" href="//cdn.hap5.top/photo/ico.png">
  <link rel="bookmark" href="//cdn.hap5.top/photo/ico.png">
  <script src="jc.js"></script>
<head>
<style>
.jichou_body{
        text-align: center;
}
.jichou_textarea{
        width: 416px;
        height: 216px;
}
</style>
<body>
<div class="jichou_body">
    <div><canvas id="jichou"></canvas></div>
    <div>
        <textarea class="jichou_textarea" placeholder="输入想要记录的字,单行超过显示限制记得回车换行" oninput="drawJichou(this)"></textarea>
    </div>
    <div><a href="javascript:;" id="saveCanvas">保存</button></a>
</div>

拆解

HTML:

<div class="jichou_body">
    <div><canvas id="jichou"></canvas></div>
    <div>
        <textarea class="jichou_textarea" placeholder="输入想要记录的字,单行超过显示限制记得回车换行" oninput="drawJichou(this)"></textarea>
    </div>
    <div><a href="javascript:;" id="saveCanvas">保存</button></a>
</div>

CSS:

.jichou_body{
        text-align: center;
}
.jichou_textarea{
        width: 416px;
        height: 216px;
}

JS:

var imgSrc = [
    "jcimg.png"//记仇图片路径按需填写
]
var images = [];
 
function loading(){
    var imgLength = imgSrc.length;
    var loadingNum = 0;
    for(var i=0;i<imgLength;i++){
        images[i] = new Image();
        images[i].src = imgSrc[i];
        images[i].onload = function(){
            loadingNum++;
            if(loadingNum===imgLength){
                initImg();
            }
        }
    }
}
//以上读取图片
function initImg(){//初始化
    var c=document.getElementById("jichou");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#ffffff";
    ctx.fillRect(0,0,c.width,c.height);
    c.width = 416;//根据记仇图片宽度写
    c.height = 336;//根据记仇图片高度写
    ctx.drawImage(images[0],0,0);
    saveCanvas();
}
function drawJichou(obj){//绘制文字
    var c=document.getElementById("jichou");
    var ctx=c.getContext("2d");
    var inputText = obj.value;
    var textArr = inputText.split("\n");
    var h = 336;
    console.log(textArr);
    for(var i=0;i<textArr.length;i++){
        h = 336+12+24*i;
    }
    c.width = 416;
    c.height = h;
    ctx.fillStyle="#ffffff";
    ctx.fillRect(0,0,c.width,c.height);
    ctx.drawImage(images[0],0,0);
    for(var i=0;i<textArr.length;i++){
        ctx.fillStyle="#000000";
        ctx.font="16px SimSun";
        ctx.fillText(textArr[i],10,336+24*i);
    }
    saveCanvas();
} 
function saveCanvas(){//保存图片
    var canvas = document.getElementById("jichou");
    var image = canvas.toDataURL("image/png"); 
    var link = document.getElementById("saveCanvas");
    link.download = "记仇.png";
    link.href = image.replace("image/png", "image/octet-stream");
}
loading();

记仇图片下载

记仇图片下载:https://cdn.hap5.top/photo/jcimg.png
放在同一个目录即可

Last modification:April 4th, 2019 at 10:14 pm
If you think my article is useful to you, please feel free to appreciate

One comment

  1. admin

    水比

Leave a Comment