HTML5 canvas banner广告编辑插件，canvas画图实例

请用谷歌或则火狐浏览器浏览！

DEMO演示：点击演示

DEMO下载：点击下载 

利用HTML5 canvas中的canvas.toDataURL 可以对画布进行输出操作，可以利用这个特性做出图像的裁剪功能

以前要做裁剪操作需要传递数据到后端，如PHP，利用相应的图像操作函数操作保存！现在使用HTML5方便多了

截图演示：

输出图片：

关键代码：

1、使用FileReader读取FILE表单文件 

Filereader有下面几种方法,预览图片用到的是readAsDataURL。

 

方法名	参数	描述
abort	none	中断读取
readAsBinaryString	file	将文件读取为二进制码
readAsDataURL	file	将文件读取为 DataURL
readAsText	file, [encoding]	将文件读取为文本

 

    // 读取文件数据
    var FileData = new FileReader();
    // 文件加载事件
    FileData.onload = function(event){
        image = new Image();
        // 文件加载事件
        image.onload = function(){
            drawImg(image,iLeft,iTop,image.width*imgScale,image.height*imgScale);
        }
        // event.target.result 获取文件路径
        image.src =  event.target.result;
    }

    function getfile() {
        var file = Tool.$('#file');
        // 验证上传文件格式
        var 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 (file.files.length === 0) {
            alert('请选择图片!');
            return;
        } else {
            var oFile = file.files[0];
            if (!fileFilter.test(oFile.type)) {
                alert("上传的文件必须是图片格式!");
                return;
            }
            // 传递数据到FileData，数据加载后引发FileData.onload事件
            FileData.readAsDataURL(oFile);
        }
    }

 获取了表单的文件以后，就可以画到画布上面去了；

2、使用canvas.toDataURL读取把画布转化为图片格式输出

    function putOut(){
        var canvas = Tool.$("#adMaker");
        if (canvas.getContext) {
            var ctx = canvas.getContext("2d");                // 获取2d画布
            var myImage = canvas.toDataURL("image/png");      // 转化为图像数据
        }
        var imageElement = Tool.$("#MyPix");  // 获取一个图像NODE
        imageElement.src = myImage;
｝

其他的就是一些清除重绘操作，表单事件了，整个是非常简单的。JS代码如下：

/**
 * author: VVG
 * My blog: http://www.cnblogs.com/NNUF/
 */
var Tool = {
    $:function (arg, context) {
        var tagAll, n, eles = [], i, sub = arg.substring(1);
        context = context || document;
        if (typeof arg == 'string') {
            switch (arg.charAt(0)) {
                case '#':
                    return document.getElementById(sub);
                    break;
                case '.':
                    if (context.getElementsByClassName) return context.getElementsByClassName(sub);
                    tagAll = $('*', context);
                    n = tagAll.length;
                    for (i = 0; i < n; i++) {
                        if (tagAll[i].className.indexOf(sub) > -1) eles.push(tagAll[i]);
                    }
                    return eles;
                    break;
                default:
                    return context.getElementsByTagName(arg);
                    break;
            }
        }
    },
    /* 添加样式名 */
    addClass:function (c, node) {
        if (!node)return;
        node.className = this.hasClass(c, node) ? node.className : node.className + ' ' + c;
    },

    /* 移除样式名 */
    removeClass:function (c, node) {
        var reg = new RegExp("(^|\\s+)" + c + "(\\s+|$)", "g");
        if (!this.hasClass(c, node))return;
        node.className = reg.test(node.className) ? node.className.replace(reg, '') : node.className;
    },

    /* 是否含有CLASS */
    hasClass:function (c, node) {
        if (!node || !node.className)return false;
        return node.className.indexOf(c) > -1;
    }
}
var AdMacker = function(){
    var image,width,height,iLeft,iTop,bgRGBA,bgOpacity,bgHeight,
        titleFontSize,titleFontColor,titleLeft,titleTop,title,
        desFontSize,desFontColor,desLeft,desTop,description;
    var bgRGB = '255,255,255';
    var imgScale = 1;

    var regex = {
        reg1:/^([1-9]\d*)$/,      // 验证正整数
        reg2:/^-?(0|[1-9]\d*)$/, // 验证零正负整数
        reg3:/^(0|0\.\d*|1)$/,   // 验证透明度0-1
        reg4:/^([1-9]|10|0\.\d*)$/,      // 缩放比例0-10，不包含0
        reg5:/^#([0-9a-zA-Z]{3}|[0-9a-zA-Z]{6})$/   // 验证颜色值
    }
    var tips = ['宽高只能为大于0的整数','偏移量只能为零和正负整数',
        '透明度值在0-1之间，包括0和1','比例限制在0-10之间，不包含0',
        '字号只能为正整数','颜色值格式不正确，为#fff或#ffffff格式'];

    // 读取文件数据
    var FileData = new FileReader();
    // 文件加载事件
    FileData.onload = function(event){
        image = new Image();
        // 文件加载事件
        image.onload = function(){
            drawImg(image,iLeft,iTop,image.width*imgScale,image.height*imgScale);
        }
        // event.target.result 获取文件路径
        image.src =  event.target.result;
    }


    // 创建画布
    function createCanvas() {
        var adMaker, canvas;
        if (!checkValue()) {
            return;
        }
        if (adMaker = Tool.$('#adMaker')) {
            adMaker.width = width;
            adMaker.height = height;
        } else {
            canvas = document.createElement('canvas');
            canvas.id = 'adMaker';
            canvas.width = width;
            canvas.height = height;
            Tool.$('#paper').innerHTML = '';
            Tool.$('#paper').appendChild(canvas);
        }
        //获取文件
        getfile();
    }

    function getfile() {
        var file = Tool.$('#file');
        // 验证上传文件格式
        var 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 (file.files.length === 0) {
            alert('请选择图片!');
            return;
        } else {
            var oFile = file.files[0];
            if (!fileFilter.test(oFile.type)) {
                alert("上传的文件必须是图片格式!");
                return;
            }
            // 传递数据到FileData，数据加载后引发FileData.onload事件
            FileData.readAsDataURL(oFile);
        }
    }

    function drawImg(img,left,top,imgwidth,imgheight){
        var canvas = Tool.$('#adMaker');
        var context = canvas.getContext('2d');
        context.clearRect(0,0,width,height);
        context.drawImage(img,left,top,imgwidth,imgheight);
        // 绘制背景
        context.fillStyle = bgRGBA;
        context.fillRect(0,height - bgHeight, width, bgHeight);
        // 绘制标题文字
        context.fillStyle = titleFontColor;
        context.font = "bold "+ titleFontSize + "px 微软雅黑";
        context.fillText(title,titleLeft,titleTop);
        // 绘制描述文字
        context.fillStyle = desFontColor;
        context.font = "normal " + desFontSize + "px 微软雅黑";
        context.fillText(description,desLeft,desTop);


    }
    function putOut(){
        var canvas = Tool.$("#adMaker");
        if (canvas.getContext) {
            var ctx = canvas.getContext("2d");                // 获取2d画布
            var myImage = canvas.toDataURL("image/png");      // 转化为图像数据
        }
        var imageElement = Tool.$("#MyPix");  // 获取一个图像NODE
        imageElement.src = myImage;
        showImage();
        alert('请右键点击图片另存为存储图片！');
    }

    function showImage(){
        var mb = Tool.$('#mb');
        var img = Tool.$("#MyPix");
        mb.style.display = 'block';
        img.style.display = 'block';
        mb.onclick = function(){
            mb.style.display = 'none';
            img.style.display = 'none';
        }
    }

    function checkValue(){
        // 获取所有
        width = Tool.$('#adWidth').value;
        height = Tool.$('#adHeight').value;
        imgScale = Tool.$('#imgScale').value;
        iLeft = Tool.$('#iLeft').value;
        iTop = Tool.$('#iTop').value;
        bgOpacity = Tool.$('#bgOpacity').value;
        bgRGBA = 'rgba(' + bgRGB + ',' + bgOpacity + ')';
        bgHeight = Tool.$('#bgHeight').value;

        titleFontSize = Tool.$('#titleFontSize').value;
        titleFontColor = Tool.$('#titleFontColor').value;
        titleLeft = Tool.$('#titleLeft').value;
        titleTop = Tool.$('#titleTop').value;
        title = Tool.$('#title').value;

        desFontSize = Tool.$('#desFontSize').value;
        desFontColor = Tool.$('#desFontColor').value;
        desTop = Tool.$('#desTop').value;
        desLeft = Tool.$('#desLeft').value;
        description = Tool.$('#description').value;

        // 画布
        if(!checkFormat('adWidth',regex.reg1,tips[0],670))return false;
        if(!checkFormat('adHeight',regex.reg1,tips[0],240))return false;

        // 图片
        if(!checkFormat('imgScale',regex.reg4,tips[3],1))return false;
        if(!checkFormat('iLeft',regex.reg2,tips[1],0))return false;
        if(!checkFormat('iTop',regex.reg2,tips[1],0))return false;

        // 背景
        if(!checkFormat('bgOpacity',regex.reg3,tips[2],0.5))return false;
        if(!checkFormat('bgHeight',regex.reg1,tips[0],60))return false;

        // 标题
        if(!checkFormat('titleFontSize',regex.reg1,tips[4],25))return false;
        if(!checkFormat('titleFontColor',regex.reg5,tips[5],'#fff'))return false;
        if(!checkFormat('titleLeft',regex.reg2,tips[1],10))return false;
        if(!checkFormat('titleTop',regex.reg2,tips[1],10))return false;

        // 描述
        if(!checkFormat('desFontSize',regex.reg1,tips[4],25))return false;
        if(!checkFormat('desFontColor',regex.reg5,tips[5],'#fff'))return false;
        if(!checkFormat('desLeft',regex.reg2,tips[1],10))return false;
        if(!checkFormat('desTop',regex.reg2,tips[1],10))return false;

        return true;
    }

    function checkFormat(id,reg,tip,defaultValue){
        var node = Tool.$('#'+id);
        var value = node.value;
        if(!reg.test(value)){
            alert(tip);
            node.value = defaultValue;
            node.focus();
            return false;
        }
        return true;
    }

    // change事件
    var inputs = Tool.$('input');
    for (var i = 0, k = inputs.length; i < k; i++) {
        if (inputs[i].type != 'button'){
            inputs[i].onchange = createCanvas;
        }
    }
    Tool.$('#putOut').onclick = putOut;

    // 颜色点击事件
    var labelI = Tool.$('#colorWarp').getElementsByTagName('i');
    for (var j = 0, n = labelI.length; j < n; j++) {
        labelI[j].onclick = function(){
            bgRGB = this.getAttribute('rgb');
            var currents = Tool.$('.current',Tool.$('#colorWarp'));
            Tool.removeClass('current',currents[0]);
            Tool.addClass('current',this);
            createCanvas();
        }
    }
}();