图片上传显示并转为二进制流

Html

Css

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值已经存放了二进制流

var texts = document.getElementById('texts');
          texts.value = bin;
          //二进制流传入“显示图片”
          console.log(bin);
          you.src = bin;
      }
  }

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

图片上传显示并转为二进制流



代码描述：将图片上传显示并转为二进制流

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

王小白

相关代码

图片上传显示并转为二进制流

最新