原创jQuery插件之fakeimg

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

原创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标签插入文档。
调用方式：

先准备标签

<div class="c-p-s c-m-b-s">
<span class="fakeimg"
      data-fakeimg="{width: 400, height: 200, text: 'dog', _class: 'testclass1 testclass2', _id: 'testid1'}"></span>
</div>
<div class="c-p-s c-m-b-s">
    <span class="fakeimg2"></span>
</div>

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

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

这就是两种调用方式了：

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

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

最后生成的html代码为

<div class="c-p-s c-m-b-s">
<img class="testclass1 testclass2" id="testid1" src="data:image/png;base64,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">
</div>

和

<div class="c-p-s c-m-b-s">
    <img id="" src="data:image/png;base64,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">
</div>

可以看到，之前的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/

秒客网

原创jQuery插件之fakeimg

相关文章