html5 二进制 上传图片,图片上传转二进制流

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;

}

}