原生Js基于HTML5 FileReader&canvas制作的banner广告图片插件
2013-06-14 16:54
966 查看
有了HTML5的FileReader&canvas这两个方法 不需要走后台服务就可以编辑生成图片了，插件只能在支持HTML5的浏览器上使用！！
简单制作过程和思路
1.创建画布
2.上传图片预览到画布
3.创建input参数控制样式
4.输出图片
=============================================
用到了两个知识点
1.html5 FileReader可以本地读取FILE文件
2.html5 Canvas用来绘图toDataURL生成图片
=============================================
参考学习资料
FileReader详解与实例---读取并显示图像文件 http://www.jsmix.com/blog/html5/file-reader.html
HTML5 Canvas 初步：字符串，路径，背景，图片 http://blog.csdn.net/sadfishsc/article/details/6873637
在线效果预览：http://jsfiddle.net/dtdxrk/m42VP/embedded/result/
简单制作过程和思路
1.创建画布
2.上传图片预览到画布
3.创建input参数控制样式
4.输出图片
=============================================
用到了两个知识点
1.html5 FileReader可以本地读取FILE文件
2.html5 Canvas用来绘图toDataURL生成图片
=============================================
参考学习资料
FileReader详解与实例---读取并显示图像文件 http://www.jsmix.com/blog/html5/file-reader.html
HTML5 Canvas 初步：字符串，路径，背景，图片 http://blog.csdn.net/sadfishsc/article/details/6873637
在线效果预览：http://jsfiddle.net/dtdxrk/m42VP/embedded/result/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>原生Js基于HTML5 canvas制作的banner广告图片插件</title>
</head>
<style type="text/css">
*{margin: 0;padding: 0;font:13px Arial;list-style: none;}
#warp{border: 1px solid #ccc;border-radius: 5px;width: 380px;background-color: #ececec;margin: 10px;line-height: 1.5;}
#warp li{margin: 10px;}
#warp li.line{background-color: #ccc;height: 1px;padding: 0;line-height: 1;font-size: 0;}
#warp li span{text-align: right;width: 120px;display: inline-block;}
#warp li #bt{padding: 5px 20px;margin:5px 0 5px 130px;}
#warp li a{display:inline-block;cursor: pointer;border: 1px solid #fff;text-indent: -9999px;width: 15px;height: 15px;}
#warp li a.active{border: 3px solid #000;}
#warp input[type=text]{border-radius: 3px; border: 1px solid #ccc; height: 23px;padding-left: 3px;margin: 0 5px;}
#warp input.short{width:40px;}
#warp input.w80{width:80px;}
#mark{position: absolute;top: 10px;left:420px;}
#worng{border-bottom: 1px solid red; display: none; background-color: #ffb2b2; text-align: center;font-size: 14px; font-weight: bold; padding: 5px 0;}
#showImg{display:none;position: absolute;top: 400px;left:420px;}
#showImg h1{color: red;font-weight: bold;font-family: "微软雅黑";font-size: 16px;}
.white{background-color: white;}
.gray{background-color: gray;}
.yellow{background-color: yellow;}
.green{background-color: green;}
.blue{background-color: blue;}
.red{background-color: red;}
.coffee{background-color: #632f00;}
.orange{background-color: orange;}
.purple{background-color: purple;}
</style>
<body>
<div id="worng">很抱歉，你的浏览器不支持FileReader方法!请安装Firefox或者Chrome浏览器</div>
<div id="warp">
<ul>
<li><span>图片上传：</span><input type="file" name="file" id="file" /></li>
<li class="line"></li>
<li><span>广告宽度：</span><input type="text" id="adWidth" class="short" value="580" />px</li>
<li><span>广告高度：</span><input type="text" id="adHeight" class="short" value="180" />px</li>
<li class="line"></li>
<li><span>文字背景颜色：</span>
<a class="gray active" rgb="37,37,37">黑色</a>
<a class="white" rgb="255,255,255">白色</a>
<a class="yellow" rgb="244,179,0">黄色</a>
<a class="green" rgb="120,186,0">绿色</a>
<a class="blue" rgb="37,115,236">蓝色</a>
<a class="red" rgb="174,17,61">红色</a>
<a class="coffee" rgb="46,23,0">咖啡</a>
<a class="orange" rgb="176,30,0">橙色</a>
<a class="purple" rgb="114,0,172">紫色</a>
</li>
<li><span>文字背景透明度：</span><input type="text" id="bgOpacity" class="short" value="0.5" /></li>
<li><span>文字背景距离Top：</span><input type="text" id="bgTop" class="short" value="110" />px</li>
<li><span>文字背景高度：</span><input type="text" id="bgHeight" class="short" value="70" />px</li>
<li class="line"></li>
<li><span>标题文字：</span><input type="text" id="titleCon" value="标题文字" /></li>
<li><span>标题字号：</span><input type="text" id="titleSize" class="short" value="25" />px</li>
<li><span>标题颜色：</span><input type="text" id="titleColor" class="short w80" value="#fff" /></li>
<li><span>标题距离Top：</span><input type="text" id="titleTop" class="short" value="140" />px</li>
<li><span>标题距离Left：</span><input type="text" id="titleLeft" class="short" value="10" />px</li>
<li class="line"></li>
<li><span>描述文字：</span><input type="text" id="txtCon" value="描述文字描述描述描述描述" /></li>
<li><span>描述字号：</span><input type="text" id="txtSize" class="short" value="15" />px</li>
<li><span>描述颜色：</span><input type="text" id="txtColor" class="short w80" value="#fff" /></li>
<li><span>描述距离Top：</span><input type="text" id="txtTop" class="short" value="170" />px</li>
<li><span>描述距离Left：</span><input type="text" id="txtLeft" class="short" value="10" />px</li>
<li><button id="bt">生成图片</button></li>
</ul>
</div>
<canvas id="mark"></canvas>
<div id="showImg">
<h1>这里是生成的图片 可以点击右键另存</h1>
<img src="" id="asImg" />
</div>
<script type="text/javascript">
var _CalF = {
$ : function(object){//选择器
if(object === undefined ) return;
var getArr = function(name,tagName,attr){
var tagName = tagName || '*',
eles = document.getElementsByTagName(tagName),
clas = (typeof document.body.style.maxHeight === "undefined") ? "className" : "class";//ie6
attr = attr || clas,
Arr = [];
for(var i=0;i<eles.length;i++){
if(eles[i].getAttribute(attr)==name){
Arr.push(eles[i]);
}
}
return Arr;
};
if(object.indexOf('#') === 0){ //#id
return document.getElementById(object.substring(1));
}else if(object.indexOf('.') === 0){ //.class
return getArr(object.substring(1));
}else if(object.match(/=/g)){ //attr=name
return getArr(object.substring(object.search(/=/g)+1),null,object.substring(0,object.search(/=/g)));
}else if(object.match(/./g)){ //tagName.className
return getArr(object.split('.')[1],object.split('.')[0]);
}
},
addHandler:function(node, type, handler){
node.addEventListener ? node.addEventListener(type, handler, false) : node.attachEvent('on'+ type, handler);
},
removeHandler: function (node, type, handler) {
node.removeEventListener ? node.removeEventListener(type, handler, false) : node.detachEvent("on" + type, handler);
},
getPosition : function(obj) { //获取元素在页面里的位置和宽高
var top = 0,
left = 0,
width = obj.offsetWidth,
height = obj.offsetHeight;
while(obj.offsetParent){
top += obj.offsetTop;
left += obj.offsetLeft;
obj = obj.offsetParent;
}
return {"top":top,"left":left,"width":width,"height":height};
},
addClass:function(c,node){ // 添加样式名
node.className = node.className + ' ' + c;
},
removeClass:function(c,node){ // 移除样式名
var reg = new RegExp("(^|\\s+)" + c + "(\\s+|$)","g");
node.className = node.className.replace(reg, '');
},
stopPropagation:function(event){ // 阻止冒泡
var event = event || window.event;
event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;
},
ie6 : function(){
return !!window.ActiveXObject && !window.XMLHttpRequest;
}
};
(function(){
var adWidth,adHeight,
bgRGB,bgColor="0,0,0",bgOpacity,bgTop,bgHeight,
titleCon,titleSize,titleColor,titleTop,titleLeft,
txtCon,txtSize,txtColor,txtTop,txtLeft;
var regex = {
reg0:/^([1-9]\d*)$/, // 验证正整数
reg1:/^-?(0|[1-9]\d*)$/, // 验证零正负整数
reg2:/^(0|0\.\d*|1)$/, // 验证透明度0-1
reg3:/^([1-9]|10|0\.\d*)$/, // 缩放比例0-10，不包含0
reg4:/^#([0-9a-zA-Z]{3}|[0-9a-zA-Z]{6})$/ // 验证颜色值
}
var tips = [
'宽高只能为大于0的整数',
'偏移量只能为零和正负整数',
'透明度值在0-1之间，包括0和1',
'字号只能为正整数',
'颜色值格式不正确，为#fff或#ffffff格式'
];
var warp = _CalF.$("#warp"),
canvas = _CalF.$("#mark"),
image = new Image(),
inputs = warp.getElementsByTagName("input"),
inputsLen = inputs.length,
a = warp.getElementsByTagName("a"),
aLen = a.length,
onloadIMG = false;
//input事件
for(var i=0;i<inputsLen;i++){
if(inputs[i].type != 'button' && inputs[i].type != 'file'){
inputs[i].onchange = getValue;
}
}
//文字背景颜色
for(var h =0; h<aLen;h++){
a[h].onclick = function(){
for(var j=0;j<aLen;j++){
_CalF.removeClass("active",a[j]);
}
bgColor = this.getAttribute("rgb");
_CalF.addClass("active",this);
getValue();
}
}
_CalF.$("#bt").onclick = createIMG;
if(typeof FileReader === 'undefined' ){ //兼容判断
_CalF.$("#worng").style.display = "block";
}else{
_CalF.addHandler(_CalF.$("#file"),"change",readFile);
}
//选择图片
function readFile(){
var file = this.files[0],
reader = new FileReader(),
fileFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
if(!fileFilter.test(file.type)){
alert("请选择图像文件！");
return false;
}
reader.readAsDataURL(file);
reader.onload = function(event){
image.src = event.target.result;
onloadIMG = true;
image.onload = getValue;
};
}
//创建画布
function createCanvas(){
var dome = canvas.getContext('2d');
canvas.width = adWidth;
canvas.height = adHeight;
//绘制画布
dome.fillStyle='#ffffff';
dome.drawImage(image,0,0);
// 绘制描述背景
dome.fillStyle = bgRGB;
dome.fillRect(0, bgTop, adWidth, bgHeight);
// 绘制标题文字
dome.fillStyle = titleColor;
dome.font = "bold "+ titleSize + "px 微软雅黑";
dome.fillText(titleCon, titleLeft, titleTop);
// 绘制描述文字
dome.fillStyle = txtColor;
dome.font = "normal " + txtSize + "px 微软雅黑";
dome.fillText(txtCon, txtLeft, txtTop);
}
//获取input值
function getValue(){
adWidth = _CalF.$("#adWidth").value;
adHeight = _CalF.$("#adHeight").value;
bgOpacity = _CalF.$("#bgOpacity").value;
bgTop = _CalF.$("#bgTop").value;
bgHeight = _CalF.$("#bgHeight").value;
bgRGB = "rgba("+ bgColor +","+bgOpacity+")";
titleCon = _CalF.$("#titleCon").value;
titleSize = _CalF.$("#titleSize").value;
titleColor = _CalF.$("#titleColor").value;
titleTop = _CalF.$("#titleTop").value;
titleLeft = _CalF.$("#titleLeft").value;
txtCon = _CalF.$("#txtCon").value;
txtSize = _CalF.$("#txtSize").value;
txtColor = _CalF.$("#txtColor").value;
txtTop = _CalF.$("#txtTop").value;
txtLeft = _CalF.$("#txtLeft").value;
if(!checkFormat("adWidth",regex.reg0,tips[0],580)) return false;
if(!checkFormat("adHeight",regex.reg0,tips[0],180)) return false;
if(!checkFormat("bgOpacity",regex.reg2,tips[2],0.5)) return false;
if(!checkFormat("bgHeight",regex.reg0,tips[0],70)) return false;
if(!checkFormat("bgTop",regex.reg1,tips[1],110)) return false;
if(!checkFormat("titleColor",regex.reg4,tips[4],"#fff")) return false;
if(!checkFormat("titleSize",regex.reg0,tips[3],25)) return false;
if(!checkFormat("titleTop",regex.reg1,tips[1],140)) return false;
if(!checkFormat("titleLeft",regex.reg1,tips[1],10)) return false;
if(!checkFormat("txtColor",regex.reg4,tips[4],"#fff")) return false;
if(!checkFormat("txtSize",regex.reg0,tips[3],15)) return false;
if(!checkFormat("txtTop",regex.reg1,tips[1],170)) return false;
if(!checkFormat("txtLeft",regex.reg1,tips[1],10)) return false;
createCanvas();
}
function checkFormat(id,reg,tip,defaultValue){
var node = _CalF.$('#'+id),
value = node.value;
if(!reg.test(value)){
alert(tip);
node.value = defaultValue;
node.focus();
return false;
}
return true;
}
//生成图片
function createIMG(){
if(onloadIMG){showImg
var imgSrc = canvas.toDataURL("image/png");
_CalF.$("#showImg").style.display = "block";
_CalF.$("#asImg").src = imgSrc;
}else{
alert("请选择图片！");
}
}
})();
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- html5添加canvas来将图片制作成马赛克效果的js插件教程
- 原生js FileReader对象实现图片上传本地预览效果
- html5 FileReader+Canvas 前端压缩图片（IE9及以下浏览器不支持）
- js上传图片&预览（filereader）
- HTML5 canvas banner广告编辑插件，canvas画图实例
- Html5添加SVGcanvas和gauge.js制作的十分精美的仪表盘插件教程
- 基于html5 canvas 的客户端异步上传图片的插件，支持客户端压缩图片尺寸
- 原生javascript FileReader对象实现图片上传本地预览效果
- js+html5绘制图片到canvas的方法
- 人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、FormData)
- Html5添加canvas图像导出为多种格式图片的jQuery插件教程
- 关于文件流的模拟上传——人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata) | 彬Go
- 基于ajax的Html5文件上传插件，带进度并支持图片预览
- JS+HTML5 FileReader对象用法示例
- 图片上传插件ImgUploadJS：用HTML5 File API 实现截图粘贴上传、拖拽上传
- 使用html5 FileReader获取图片，并异步上传到服务器(不使用iframe)
- 基于HTML5 Canvas:字符串,路径,背景,图片的详解
- 基于HTML5 Canvas实现的图片马赛克模糊特效
- 浅谈js图片前端预览之filereader和window.URL.createObjectURL
- 自制一个H5图片拖拽、裁剪插件（原生JS）