原生js+canvas实现骰子作图

最终效果大家可以试一下：https://areocrystal.github.io/drawbydice/点击打开链接，上传图片后记得要点一下那个start（那个滑动条最好不要拉到最左边去了，虽然渲染出的最接近原图，但cpu不好的同学浏览器会卡死）。

其实这个个人小玩意早在几个月前就做好了,主要就是用大小不一的点(或其他)来重新绘制图片。

首先在一个闭包中进行初始化，并进行原生代码的封装

(function(doc){

    var concatImg = {

        init(){
            var getId = doc.getElementById.bind(doc)
            this.file = getId('uoploadImg')
            this.cas = getId('canvas')
            this.canvas = doc.createElement('canvas')
            this.ctx = this.cas.getContext('2d')
            this.ctx2 = this.canvas.getContext('2d')
            this.img = new Image()
            this.fr = new FileReader()
            this.range = getId('range')
            this.autoCalc = getId('autocalc')
            this.trigger = getId('start')
            this.colour = getId('colour')
            this.path = getId('pathinfo')
            this.selection = getId('selection')
            this.maxUnitPixel = +this.range.value
            this.unitPixelColor = this.colour.value
            this.isAutoCalc = this.autoCalc.checked
            this.selectionValue = this.selection.value
            this.pixelCollection =
                [...'1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$%^&*()_+{}|:"<>?-=[]\\;\',./`~']
            this.pixelCollectionLen = this.pixelCollection.length
            this.drawDetail = this.primitiveDrawDetail
            this.bindEvent.call(this)
        },
}
}(document)

这里是表单控制

<div class="row">
    <div class="col-lg-4">
        <div class="input-group">
            <section class="input-group-btn">
                <button class="btn btn-success" type="button" id="start">Start</button>
            </section>
            <input type="text" class="form-control" placeholder="name of the file:" id="pathinfo">
            <input type="file" id="uoploadImg" class="form-control" accept="image/*">
            <span class="input-group-addon">auto calculate：
                <input type="checkbox" aria-label="..." id="autocalc">
            </span>
        </div>
        <select id="selection" class="form-control">
            <option value="1">dot</option>
            <option value="2">character</option>
            <option value="3">brick</option>
        </select>
    </div>
    <div class="col-lg-2">
        long of side setting：