您的位置：首页 > 其它

用canvas制作表情包

2017-05-17 23:53 183 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航