用canvas制作表情包

H5新增的canvas工具非常强大而且实用，可以制作图片，视频，今天，我就尝试用canvas做了一个表情包小程序。
效果图如下：

二话不说，show the code

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>demo</title><style>#left{float: left;margin-right: 20px;}span{font-size: 20px;font-weight: bold;}</style>
</head>
<body>
<div id="left"><div><input type="file" id="file"></div><div id="image-container"><canvas width="600" height="400"></canvas></div>
</div>
<div><span>Top Line:</span><br><input type="text" id="topLineText"><br><span>Bottom Line</span><br><input type="text" id="bottomLineText"><br><button id="saveButton">Save</button>
</div><script type="text/javascript">
function textChangeListener(evt){var id=evt.target.id;var text=evt.target.value;if (id=="topLineText") {window.topLineText=text;}else{window.bottomLineText=text;}redrawMeme(window.imageSrc,window.topLineText,window.bottomLineText);
}
function redrawMeme(image,topLine,bottomLine){var canvas=document.querySelector("canvas");var ctx=canvas.getContext("2d");if (image!=null) {ctx.drawImage(image,0,0,canvas.width,canvas.height);}ctx.font="30pt Impact";ctx.textAlign="center";ctx.strokeStyle="black";ctx.lineWidth=3;ctx.fillStyle="white";if (topLine!=null) {ctx.fillText(topLine,canvas.width/2,40);ctx.strokeText(topLine,canvas.width/2,40);}if(bottomLine!=null){ctx.fillText(bottomLine,canvas.width/2,canvas.height-20);ctx.strokeText(bottomLine,canvas.width/2,canvas.height-20);}}
function saveFile(){window.open(document.querySelector("canvas").toDataURL());
}
function handleFileSelect(evt){var canvasWidth=500;var canvasHeight=500;var file=evt.target.files[0];var reader=new FileReader();reader.onload=function(fileObject){var data=fileObject.target.result;var image=new Image();image.onload=function(){window.imageSrc=this;redrawMeme(window.imageSrc,null,null);}image.src=data;console.log(fileObject.target.result);
};
reader.readAsDataURL(file);
}window.topLineText = "";window.bottomLineText = "";var input1 = document.getElementById('topLineText');var input2 = document.getElementById('bottomLineText');input1.oninput = textChangeListener;input2.oninput = textChangeListener;document.getElementById('file').addEventListener('change', handleFileSelect, false);document.querySelector('button').addEventListener('click', saveFile, false);
</script>
</body>

用canvas制作表情包相关推荐

canvas 制作表情包
canvas 制作表情包代码如下. 1 <!DOCTYPE html> 2 3 <html> 4 <head> 5 <title>表情制作</t ...
linux 视频转gif,GitHub - alinuxsa/VideoToGIF: video to gif 视频转gif制作表情包插件（可以添加文字）...
Chrome浏览器插件安装点这里点这安装 Install 背景上面这张图大家都见过吧,哈哈现在聊天时候少不了斗图,光发静图逼格略低了些,GIF在斗图中肯定略胜一筹,手绘动画生成GIF对大多数人来 ...
php代码画表情包,canvas绘制表情包的示例代码
本文介绍了canvas绘制表情包的示例代码,分享给大家,具体如下: 绘制卡通笑脸 var canvas = document.getElementById('canvas'); var context ...
斗图神器--纯前端实现视频转GIF制作表情包（已开源）
视频转GIF 在线体验 coldday.github.io/mp4ToGif/ Chrome浏览器插件安装点这里点这安装背景视频转GIF 上面这张图大家都见过吧,哈哈现在聊天时候少不了斗图,光 ...
【视频制作表情包】能直接添加文字的表情包制作工具
直达链接:剪画音频视频剪辑视频制作成表情包时都需要先给视频添加有趣的文字再导出视频然后再制作成GIF表情包今天给大家推荐一款直接添加有趣文字的表情包工具无需下载,打开即用! 在微信中搜索 ...
python表情换头_使用Python制作表情包实现换脸功能
"表情包"是现在非常流行的交流方式,通过一张图片就能把文字不能表达或不便于表达的情感给表示出来,表情包一经诞生,就统治了中国人的社交圈,尤其是年轻人,他们的社交方式是所谓" ...
斗图？教你用 Python 制作表情包
作者 | Ahab 责编 | 屠敏 "表情包"是现在非常流行的交流方式,通过一张图片就能把文字不能表达或不便于表达的情感给表示出来,表情包一经诞生,就统治了中国人的社交圈,尤其是年 ...
表情包制作APP的相关推荐可以制作表情包的软件
自从表情包出来以后,几乎每个人聊天都会使用到,搞笑可爱的GIF不仅可以调整聊天的氛围,更增加了和对方的感情,但是一般这些聊天的表情包都是直接在社交聊天工具中找到的使用的,其实自己也是可以制作这样的表情 ...
TextMeshPro 制作表情包流程
TextMeshPro 制作表情包流程 1.用TexturePacker 制作图集 2.点击 Publish导出文件 3.将文件导入Unity 4.在Unity导入TexturePacker工具 5. ...
兼莱宝分享：表情包项目的玩法思路，轻松在家制作表情包赚钱
大家好,今天给大家分享一个制作表情包的项目,新手轻松躺赚. 一:项目介绍每个人日常都会接触到表情包.聊天的时候收集了几十个表情包,大家知道表情包也能赚钱吗?运气好的话,一套表情包可以赚几千.几万的收 ...

用canvas制作表情包

用canvas制作表情包相关推荐

最新文章

热门文章