原创jQuery插件之fakeimg

好吧，其实我也不知道应该怎么称呼这个插件，脑袋瓜比较笨，也想不出更好的名字了，先看看效果图吧，平时的开发中，肯定有过这样的需求

开发前端页面的时候，想要嵌入一张图片，但是具体嵌入哪一张图片还待定。

这时候可以使用一张临时的图片顶替，到时候再替换，为了足够灵活，希望这个图片可以是任意尺寸，任意时候，感觉尺寸不满意，替换之。

我最初想到的是使用后端来生成一个图片流，img标签的src属性指向这个流，这样，就可以灵活生成任意尺寸的图片。

比如，这样一个img：

这样的话，后端根据这个src地址的参数就可以生成需要的图片流，然后给页面。

既然用后端生成的方式已经实现了，那为什么还有今天这个jQuery插件呢？

后来，我想以后会主要使用nodejs作为后端，然后nodejs后端我也才刚开始，怎么生成图片也不清楚呢。

于是，就想起在前端用js生成的方式。

下面上源代码：

$.fn.extend({
        fakeimg: function (_opts) {
            $(this).each(function () {
                var $el = $(this)
                var opts = {}
                if (_opts) {
                    opts = _opts
                } else {
                    var fakeData = $el.data('fakeimg')
                    if (!fakeData) {
                        throw new Error('缺少参数')
                    }
                    eval('opts=' + fakeData)
                }
                var width = opts.width
                var height = opts.height
                var text = opts.text || (width + 'x' + height)
                var canvas = document.createElement('canvas')
                canvas.width = width
                canvas.height = height
                var ctx = canvas.getContext('2d')
                ctx.fillStyle = '#ccc'
                ctx.fillRect(0, 0, width, height)
                ctx.fillStyle = '#959595'
                ctx.textAlign = 'center'
                ctx.textBaseline = 'middle'
                var textHeight = Math.min(width, height) / 2
                ctx.fOnt= textHeight + 'px Consolas'
                ctx.fillText(text, width / 2, height / 2)
                var imageData = canvas.toDataURL()
                var img = document.createElement('img')
                $(img).addClass(opts._class || '').attr('id', opts._id || '').attr('src', imageData)
                $el.after(img).remove()
            })
        }
    })

代码很简单，就是用canvas画图，然后把canvas的像素数据赋值给一个img，再把这个img标签插入文档。
调用方式：

先准备标签

      data-fakeimg="{width: 400, height: 200, text: 'dog', _class: 'testclass1 testclass2', _id: 'testid1'}">


    

这里，我准备了两个标签，到时候会展示两种调用的方式

$('.fakeimg').fakeimg()
$('.fakeimg2').fakeimg({
     width: 500,
     height: 100
})

这就是两种调用方式了：

第一种，不传任何参数，直接使用data-fakeimg的值；

第二种，传递一个参数，根据这个参数来生成图片。

最后生成的html代码为

和

可以看到，之前的span标签被img替换了，并且，data-fakeimg属性的class和id值也赋给了新生成的img。

这里最好是用span，而不是其他的，因为span和img一样，都是行内元素，替换元素的时候，不会出现较大的视觉变化。

最后说下参数

width：img的width，数值型，不要带px

height：img的height，数值型，不要带px

bgcolor：背景色，#ccc、#cccccc、red这样的格式均可，默认#ccc

color：文字的颜色，格式同上，默认#959595

text：img内绘制的文字，不给值得话，默认是widthxheight

_class：将这些class添加到img，格式为字符串

_id：同class

好吧，就这么多，希望能够帮到各位。

2016/12/10更新

由于class是保留字，使用_class替换之，为了对称，id也用_id替换之

2016/12/18更新

新增背景色和字体颜色的设置

另外，个人域名终于可以访问了，第一时间做了一个“官网”，O(∩_∩)O嘻嘻~

后续优先在“官网”更新

官网地址：http://fe.dogzhang.com/fakeimg/