获取文件输入框中的图片，并用canvas转成base64位格式

说明：需要以服务器模式打开此文件

直接上代码：
CSS:

#canvas{
            display: none;
        }

HTML：

<input type="file" accept="image/*" id='file'>
    <canvas id='canvas'></canvas>
    <img src="" id='target-img'>

javascript:

let canvas = document.getElementById("canvas"),
    targetImg = document.getElementById('target-img'),
    file = document.getElementById('file'),
    context = canvas.getContext('2d')

    file.onchange = function () {
        let URL = window.URL || window.webkitURL,
        dataURL = URL.createObjectURL(this.files[0])    // 创建URL对象
        let img = new Image()
        img.crossOrigin = "anonymous"   // 只有服务器模式打开， 才有效
        img.onload = function () {
            URL.revo.revokeObjectURL(this.src)  //  img加载完成后,主动释放URL对象
            canvas.width = img.width
            canvas.height = img.height
            context.drawImage(img, 0, 0 , img.width,  img.height)
            let dataUrl = canvas.toDataURL('img/png')
            targetImg.src = dataUrl
        }

        img.src = dataURL
    }