二进制转化

一、网页代码

<input type="file" name="" id="" onchange="tobin(this)" value="">
<img src="" id="you" width="320px">
<div style="position: absolute;z-index: -1;width: 0px;height: 0px;overflow: hidden;">
    <canvas id="can" width="320px" height="240px"></canvas>
</div>

二、js代码

function tobin(target) {
    //获取临时缓存图片的路径，并传递给“显示图片”
    var url = window.URL.createObjectURL(target.files.item(0));
    //制造一张图片，传入画布，让它在画布中画出来。
    var img1 = new Image();
    img1.src = url;

    //初始化捕捉元素
    var can = document.getElementById('can');
    //var you = document.getElementById('you');
    var context = can.getContext("2d");

    //当图片制造完成后，执行函数
    img1.onload = function() {
        //因为canvas输出的二进制图片会根据当前canvas的大小而变形，所以要将图片原始尺寸取出，然后传递给canvas,这样就能保证输出的图片原始比例不变
        var nw = img1.naturalWidth;
        var nh = img1.naturalHeight;
        can.setAttribute('width', nw + 'px')
        can.setAttribute('height', nh + 'px')
        //图片原始比例
        console.log(nw, nh);
        //绘制进canvas
        context.drawImage(img1, 0, 0, nw, nh);

        //二进制流转化函数
        var bin = can.toDataURL("image/jpeg"); //bin值已经存放了二进制流

        //二进制流传入“显示图片”
        you.src = bin;
    }

}