江苏龙网

  1. 首页 > 人文 > >

稚久|从图片裁剪来聊聊前端二进制( 三 )

  • width：图片宽度 ， 单位是像素
  • height：图片高度 ， 单位是像素
  • data：Uint8ClampedArray类型的一维数组 ， 包含着RGBA格式的整型数据 ， 范围在 0 至 255 之间（包括 255） 。
创建一个ImageData对象使用createImageData() 方法去创建一个新的 ， 空白的ImageData对象 。
var myImageData = http://kandian.youth.cn/index/ctx.createImageData(width, height);上面代码创建了一个新的具体特定尺寸的ImageData对象 。 所有像素被预设为透明黑 。
得到场景像素数据为了获得一个包含画布场景像素数据的ImageData对象 ， 你可以用getImageData()方法：
var myImageData = http://kandian.youth.cn/index/ctx.getImageData(left, top, width, height);在场景中写入像素数据你可以用putImageData()方法去对场景进行像素数据的写入 。
ctx.putImageData(myImageData, dx, dy);toDataURL 将canvas转为 data URI格式有如下元素：
可以用下面的方式获取一个data-URL
var canvas = document.getElementById("canvas");var dataURL = canvas.toDataURL();console.log(dataURL);// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
到这里 ， 二进制相关的基础知识我已经铺垫完了 。 下面让我们回到文章开头提到的那个产品的“没那么简单”的新需求：图片裁剪上传及预览 。
其实 ， 像图片裁剪上传这种社区已经有非常成熟的解决方案了 ， 如vue-cropper[4] 。 这里 ， 我选择手写一个简易的图片裁剪的目的是因为这其中用到了上文提及的大量的二进制知识 ， 可以很好的将理论与实践结合 。
话不多说 ， 开 Giao！！
需求开发 Giao Giao！先来看下最终的效果：
稚久|从图片裁剪来聊聊前端二进制另外 ， 我用一张图梳理了以上提到的前端二进制模块的关系 ， 这对于下面需求的开发会有很大的帮助：
稚久|从图片裁剪来聊聊前端二进制整个需求分以下四步：
1、获取文件并读取文件 。
2、获取裁剪坐标 。
3、裁剪图片 。
4、读取裁剪后的图片预览并上传 。
获取文件并读取文件首先来看下上面第一步提到的获取文件 。 对应就是给input绑定的handleChange事件：
handleChange = (event) => {let file = event.target.files[0];let fileReader = new FileReader();fileReader.onload = (event) => {this.setState({file,dataURL: event.target.result,});this.imageRef.current.onload = () => this.drawImage();};fileReader.readAsDataURL(file);};HTML5 支持从 input[type=file] 元素中直接获取文件信息 ， 也可以读取文件内容 。
这里就需要用到了 FileReader， 这个类是专门用来读取本地文件的 。 纯文本或者二进制都可以读取 ， 但是本地文件必须是经过用户允许才能读取 ， 也就是说用户要在input[type=file]中选择了这个文件 ， 你才能读取到它 。
通过 FileReader 我们可以将图片文件转化成 DataURL ， 就是以 data:image/png;base64开头的一种URL,然后可以直接放在 image.src 里 ， 这样本地图片就显示出来了 。
获取裁剪坐标这里主要是mousedown、mousemove、mouseup事件的结合使用 。


推荐阅读


上一篇：星球狂想战队|零差评的880页Java系统性能优化笔记，涵盖JIT、ASM、JSR269等等

下一篇：通天战队|闲鱼惊现全新诺基亚808，发布于8年前，如今还要6999