30万年薪的IT程序员也不知道这个HTML5图片上传功能

编辑:小豹子/2018-10-11 17:02

  canvas作为一个综合的绘制平台,能够在此平台上进行文字,图形等凤凰彩票官网(fh03.cc)信息内容的处理,这样也拓展了canvas的使用场景,比如开发webapp的时候可以使用canvas来进行软件界面的按钮设置或是开发在线游戏时充当游戏的基本素材。

  30万年薪的IT程序员也不知道这个HTML5图片上传功能

  HTML5

  1.那么如何能够上传图片呢?

  浏览器出于安全考量,没有给我们开放过多的接口去操作本地的文件权限,能够上传文件的方式很少。而input元素就是其中之一。

  那么如何能够上传图片呢?当我们选中文件后要想把该文件插入浏览器页面中间的话就必须要获取到元素的文件地址,这样才能通过给元素设置文件地址来展示一张图片出来。

  selectPic.onchange = function (){

  var url = window.URL.createObjectURL(this.files[0]);//得到上传到的文件地址

  };

  2.得到我们的目标图片的地址后我们就可以新建一个img元素出来,此处创建img元素不是通过createElement的方式而是使用构造函数的方法来实现这个效果

  selectPic.onchange = function (){

  var url = window.URL.createObjectURL(this.files[0]);//console.log(this.files);//得到上传到的文件

  var img = new Image();//生成新的图凤凰彩票网(fh643.com)片

  img.src = url;//设置图片地址

  };

  但是接下来就有一个深坑了,如果我们直接把这个img对象插入canvas的话是无法在网页上显示出来的,这个原因在于我们给img对象设置了图片地址属性后,img对象还没有完成图片文件的寻址和渲染,所以立即加入canvas是什么都看不到的。

  30万年薪的IT程序员也不知道这个HTML5图片上传功能

  CANVAS

  3.那该怎么办呢?这个问题有点像是把获取元素的js代码写在了head标签里面,如果要效果正常的话最好的方式就是给他加一个onload事件。此处也是这样的一个道理,我们可以监听img对是否完成的图形的渲染,若是完成了的话我们就再去执行我们需要的操作了

  selectPic.onchange = function (){

  var url = window.URL.createObjectURL(this.files[0]);//console.log(this.files);//得到上传到的文件

  var img = new Image();//生成新的图片

  img.src = url;//设置图片地址

  img.onload = function (){

  var w = img.naturalWidth;//获取图片原始宽度

  var h = img.naturalHeight;//获取图片原始高度

  var w1 = w / (h / 500);

  var startX = (500 - w1) / 2;//起始点X坐标

  canCon.drawImage(img, startX, 0, w1, 500);

  };

  };

  要想在canvas中绘制出图形,那么必须要给这个图形设置好一个绘制的起始点坐标以及改元素的宽高,我们可以通过,img对象的naturalWidth和naturalHeight属性得到文件的原始宽高,并计算出宽高比例,以此根据我们的实际业务需求等比例缩放图片

  大家都会了吗?