【收集】实现 苹果 WWDC 2014 海报效果

文章目录

该效果来自于：Funny JS

作者是因为知乎上的一个问题而写了这篇文章和这个程序，使用HTML5+JS进行开发，可以将任意图片转换成WWDC2014海报的样式：用色调如彩虹般绚丽的圆角矩形来拼成原图。

我只想说，效果超乎想像。Canvas确实可以大有作为。

看官们就自行体验吧。

以下贴上所有代码：

HTML部分：

<div id="toolbar">
    <input type="button" value="苹果" id="apple">
    <input type="button" value="微软" id="windows">
    <input type="button" value="Twitter" id="twitter">
    <input type="button" value="知乎" id="zhihu">
    <input type="button" value="刘看山" id="liukanshan">
    <input type="button" value="喵" id="cat">
    <input type="button" value="苏莉安" id="sulian">
    <span id="uploadspan">上传图片：<input type="file" id="localimg"/>
    </span>
</div>
<div id="container">
    <canvas id="image">
    </canvas>
</div>

CSS部分：

body {
            margin: 0px;
        }

        #container {
            width: 100%;
        }

        #toolbar {
            background-color: #CCC;
            width: 100%;
            height: 32px;
            font-size: 16px;
            line-height: 32px;
            margin: 0px;
        }

        #toolbar input {
            font-size: 16px;
        }

        #toolbar input[type="button"] {
            background-color: #99CCFF;
            border: 1px solid #6699CC;
            width: 64px;
            height: 24px;
            margin: 0px;
        }

Javascript部分：

var canvas; //画布
var ctx; //绘图内容
var blocksize = 14//单个图块的尺寸
var row, col//按图块尺寸算出的行列数
var drawing = false;

//页面加载
$(function () {
    init();
});

//初始化
function init() {
    canvas = document.getElementById("image");
    if (!canvas.getContext) self.location = "/nohtml5.html"
    else {
        //初始化容器尺寸
        var container = $("#container");
        container.height($(window).height() - $("#toolbar").height() - 2);
        canvas.width = container.width();
        canvas.height = container.height();
        ctx = canvas.getContext("2d");

        var rainbowfill = ctx.createLinearGradient(0, 0, canvas.width, 0);//彩虹色填充
        rainbowfill.addColorStop(0, "#92ea0e");
        rainbowfill.addColorStop(0.25, "#03d9f5");
        rainbowfill.addColorStop(0.5, "#8e49f7");
        rainbowfill.addColorStop(0.75, "#fb9343");
        rainbowfill.addColorStop(1, "#fdda06");
        ctx.fillStyle = rainbowfill;

        row = Math.floor(canvas.height / blocksize)
        col = Math.floor(canvas.width / blocksize)

        $("#toolbar :button").click(function () {
            if (drawing) return;
            drawing = true;
            loadServerImg("wwdc2014/" + $(this).attr("id") + ".jpg");
        })

        if(typeof FileReader==='undefined'){
            $("#uploadspan").hide();//不能使用本地文件接口则禁用
        }else{
            $("#localimg").change(function () {
                var file = this.files[0];
                if(!/image\/\w+/.test(file.type)){
                    alert("你选择的不是图片文件！");
                    return false;
                }
                var imgreader = new FileReader();
                imgreader.readAsDataURL(file);
                imgreader.onload = function(e){
                    loadServerImg(this.result);
                }
            });
        }

        loadServerImg("wwdc2014/apple.jpg");
    }
}

//根据左上角坐标xy和尺寸size绘制单个圆角矩形
function roundRectanglePath(x, y, size, radius) {
    var radius = Math.ceil(size / 4);
    ctx.beginPath();
    ctx.moveTo(x + radius, y);
    ctx.lineTo(x + size - radius, y);
    ctx.arc(x + size - radius, y + radius, radius, 3 * Math.PI / 2, 2 * Math.PI, false);
    ctx.lineTo(x + size, y + size - radius);
    ctx.arc(x + size - radius, y + size - radius, radius, 0, Math.PI / 2, false);
    ctx.lineTo(x + radius, y + size);
    ctx.arc(x + radius, y + size - radius, radius, Math.PI / 2, Math.PI, false);
    ctx.lineTo(x, y + radius);
    ctx.arc(x + radius, y + radius, radius, Math.PI, 3 * Math.PI / 2, false);
    ctx.closePath();
    ctx.fill();
}

//绘制一斜行方块
function drawBlocks(imgdata, maxgray, mingray, cursor) {
    if (cursor >= col + row) {
        drawing = false;
        return;
    }
    var r , c;//起始行列
    if (cursor < col) {
        r = 0;
        c = cursor;
    }
    else {
        r = cursor - col + 1;
        c = col - 1;
    }
    while (r < row && c >= 0) {
        var gray = (imgdata[c][r] - mingray) / (maxgray - mingray);//以最大和最小灰度为界，计算出相对灰度
        if (gray > 0.25) {//过浅的灰度不绘制
            var pointsize = 2 * (Math.ceil(gray * blocksize / 2) - 1);//灰度决定尺寸
            if (pointsize >= blocksize) pointsize = blocksize - 2;//防止超限
            var x = c * blocksize + (blocksize - pointsize) / 2
            var y = r * blocksize + (blocksize - pointsize) / 2
            roundRectanglePath(x, y, pointsize)
        }
        r++;
        c--;
    }
    setTimeout(function () {
        drawBlocks(imgdata, maxgray, mingray, cursor + 1);
    }, 7);//延时绘制下一排
}

//读取图片
function loadServerImg(src) {
    var imageObj = new Image();
    imageObj.onload = function () {
        //生成离屏画布
        var offcanvas = document.createElement('canvas');
        var imgw, imgh;//缩放后的图片尺寸
        if (col / row > imageObj.width / imageObj.height) {//如果画布比图片宽，则以高度为准进行放缩
            imgw = Math.floor(imageObj.width / imageObj.height * row);
            imgh = row;
        }
        else {//否则以宽度为准进行放缩
            imgw = col;
            imgh = Math.floor(imageObj.height / imageObj.width * col);
        }
        offcanvas.width = imgw;
        offcanvas.height = imgh;
        var offctx = offcanvas.getContext("2d");
        offctx.drawImage(this, 0, 0, imgw, imgh);
        var imgdata = offctx.getImageData(0, 0, imgw, imgh)
        //返回数组初始化为全黑
        var returndata = new Array()
        for (var i = 0; i < col; i++) {
            returndata[i] = new Array()
            for (var j = 0; j < row; j++)
                returndata[i][j] = 255;
        }
        //然后为中心部分赋值
        var startcol = Math.floor((col - imgw) / 2)
        var startrow = Math.floor((row - imgh) / 2)
        var maxgray = 0, mingray = 255;//最大最小灰度值
        for (var i = 0; i < imgw; i++) {
            for (var j = 0; j < imgh; j++) {
                var cursor = (i + j * imgw) * 4;
                var gray = imgdata.data[cursor] * .3 + imgdata.data[cursor + 1] * .59 + imgdata.data[cursor + 2] * .11;//取灰度
                if (gray > maxgray) maxgray = gray;
                if (gray < mingray) mingray = gray;
                returndata[startcol + i][startrow + j] = gray;
            }
        }
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawBlocks(returndata, maxgray, mingray, 0);
    };
    imageObj.src = src;
}

//建立动画对象
function createAnime(callback) {
    if (!callback) return null;
    var anime = new Object();
    anime.starttime//动画开始时间
    anime.fps;//上一秒帧数
    anime.secondstarttime;//当前秒开始时间（用于统计每秒的帧数）
    anime.framestarttime;
    anime.nextfps;
    anime.status = "idle";
    anime.start = function () {
        if (this.status == "running") return;
        this.status = "running";
        if (this.status == "idle") this.starttime = new Date();//初次启动才计时
        this.secondstarttime = new Date();
        this.framestarttime = new Date();
        this.fps = 0;//上一秒帧数
        this.nextfps = 0;

        _animeFrame(this, callback);
    };
    anime.stop = function () {
        this.status = "stopped";
    };
    return anime;
}

function _animeFrame(anime, callback) {
    anime.nextfps++;//累加帧数
    var currenttime = new Date()
    if (currenttime - anime.secondstarttime >= 1000) {//满1秒则为帧数赋值，清空计数
        anime.fps = anime.nextfps;
        anime.nextfps = 0;
        anime.secondstarttime = currenttime;
    }
    var framespan = currenttime - anime.framestarttime;//计算两帧间隔
    anime.framestarttime = currenttime;

    callback(framespan, anime.fps);
    if (anime && anime.status == "running") {
        requestAnimationFrame(function () {
                _animeFrame(anime, callback);
            }
        );
    }
}


//requestAnimationFrame动画方法的兼容性
(function () {
    var lastTime = 0;
    var vendors = ['webkit', 'moz'];
    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||    // Webkit中此取消方法的名字变了
            window[vendors[x] + 'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame) {
        window.requestAnimationFrame = function (callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
            var id = window.setTimeout(function () {
                callback(currTime + timeToCall);
            }, timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
    }
    if (!window.cancelAnimationFrame) {
        window.cancelAnimationFrame = function (id) {
            clearTimeout(id);
        };
    }
}());