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();
        }
    }
}();