上一篇说了FileAPI中FileReader的readAsText,这里继续上文，说说另外一个API readAsDataURL。

这个接口是将File或者Blob读成base64格式的字符串，然后直接挂在HTML5的元素上，例如img就可以直接使用。

实际用途可以是图片预览和图片剪裁，这里我将用来实现图片剪裁。

思路：

1. file api的FileReader实现本地图片预览

2. 用web api的拖拽功能来实现剪裁

效果：

那么话不多说：

html代码：

<html>

<head>

    <title>FileReader 之 readAsDataURL</title>

</head>

<body style="margin: 2em 4em"  draggable="false">

    <div>图片剪裁</div>

    <input type="file" id="fileImageCut" value="选择图片"><br/>

    <div  draggable="false" id="imgWrapper" id="container1" style="display: inline-block;width: 500px">

        <div style="width: 404px;height: 404px;border:1px solid cornflowerblue;position: relative">

            <img draggable="false" style="position: absolute;left:-1px;bottom:-1px; border:1px solid greenyellow " id="imgPreview" />

            <div draggable="true" id="cutter" style="position: absolute;cursor:crosshair;left:-px;bottom:-2px; width:300px; height: 300px; border: 2px dotted sienna"></div>

        </div>

    </div>

    <div style="display: inline-block;width: 200px;height:200px;vertical-align:buttom;border: 1px solid cadetblue;overflow: hidden;position:relative">

        <img  draggable="false" style="width:266.7px;height:266.7px;position: absolute;left: 0;bottom: 0" id="imgResult">

    </div>

    <!--<div draggable="true" id="cutter" style="position: absolute;cursor:crosshair;left:62px;top:274px; width:200px; height: 200px; border: 2px dotted sienna"></div> -->

</body>

<script src="./js/readAsDataURL.js"></script>

</html>

js代码：

const IMAGE_MAX_SIZE = 2

const CUTTER_WIDTH = CUTTER_HEIGHT = 300

class SimpleImageCutter {

    constructor(options) {

        this.fileUpload = options.fileUpload

        this.imgPreview = options.imgPreview

        this.imgResult = options.imgResult

        this.cutter = options.cutter

        this.percentage = this.imgResult.parentElement.clientWidth / this.cutter.clientWidth

        this.iLeft = this.iRight = this.iTop = this.iBottom = null

    }

    init() {

        this.resgiterEvents()

    }

    resgiterEvents() {

        let cLeft, cRight, cTop, cBottom, cOffsetX, cOffsetY,

            cutter = this.cutter, imgPreview = this.imgPreview, cBorderWidth = Number.parseInt(cutter.style.borderWidth.replace('px', '')),

            cPBorderWidth = Number.parseInt(imgPreview.style.borderWidth.replace('px', ''))

        this.fileUpload.addEventListener('change', (ev) => {

            let files = ev.target.files, file;

            //检查图片类型

            if (files.length && (file = files[0])) {

                if (!this.checkFile(file)) {

                    return

                }

                //重置高宽

                imgPreview.removeAttribute('height')

                imgPreview.removeAttribute('width')

                imgPreview.style.width = imgPreview.style.height = null

                imgPreview.style.visibility = 'hidden'

                let fr = new FileReader()

                fr.onload = () => {

                    imgPreview.onload = () => {

                        this.resizeImage()

                        imgPreview.style.visibility = 'visible'

                        this.resizeCutter()

                        this.refreshPercentage()

                        this.resizeResult()

                        //计算图片相对浏览器的限值

                        this.iLeft = imgPreview.getBoundingClientRect().left + document.documentElement.scrollLeft + cPBorderWidth

                        this.iTop = imgPreview.getBoundingClientRect().top + document.documentElement.scrollTop + cPBorderWidth

                        this.iRight = this.iLeft + imgPreview.clientWidth

                        this.iBottom = this.iTop + imgPreview.clientHeight

                    }

                    this.imgResult.src = imgPreview.src = fr.result

                }

                //如果错误，抛出异常

                fr.onerror = ev　=> alert(ev.target.error)

                fr.readAsDataURL(file)

            }

        }, false)

        cutter.addEventListener('dragstart', ev => {

            cOffsetX = ev.offsetX

            cOffsetY = ev.offsetY

            /*

            let dragIcon = document.createElement("img")

            dragIcon.src = 'image/drag.jpg'

            dragIcon.width = cutter.width

            document.body.appendChild(dragIcon)

            ev.dataTransfer.setDragImage(dragIcon, 0, 0); */

            //cutter.style.border = "2px red solid"

            console.log('dragstart')

            return false

        }, false)

        cutter.addEventListener('dragover', ev => {

            //ev.stopPropagation()

            //ev.preventDefault()

            console.log('dragover')

            return false

        }, false)

        cutter.addEventListener('dragleave', ev => {

            //ev.stopPropagation()

            //ev.preventDefault()

            console.log('dragleave')

            return false

        }, false)

        cutter.addEventListener('drop', ev => {

            console.log('drop')

        }, false)

        cutter.addEventListener('dragend', ev => {

            cLeft = ev.clientX - cOffsetX - cBorderWidth

            cTop = ev.clientY - cOffsetY - cBorderWidth

            cRight = cLeft + cutter.clientWidth + cBorderWidth

            cBottom = cTop + cutter.clientHeight + cBorderWidth

            if (!this.iTop || cTop < this.iTop || cLeft < this.iLeft || cRight > this.iRight || cBottom > this.iBottom) {

                ev.stopPropagation()

                ev.preventDefault()

            } else {

                cutter.style.left = (cLeft - this.iLeft) + 'px'

                cutter.style.top =  (cTop - this.iTop) + 'px'

                imgResult.style.left = -((cLeft - this.iLeft) * this.percentage).toFixed(2) + 'px'

                imgResult.style.top = -((cTop - this.iTop) * this.percentage).toFixed(2) + 'px'

            }

        }, false)

    }

    checkFile(file) {

        if (!file.type.startsWith("image")) {

            alert('不是有效的图片')

            return false

        }

        if (file.size > IMAGE_MAX_SIZE * 1024 * 1024) {

            alert(`上传的图片不允许大于${IMAGE_MAX_SIZE}M`)

            return false

        }

        return true

    }

    resizeImage() {

        let img = this.imgPreview, h = img.height, w = img.width,

            ph = img.parentElement.clientHeight, pw = img.parentElement.clientWidth,

            phc = h / ph, pwc = w / pw

        phc > pwc ? img.height = ph : img.width = pw

    }

    resizeCutter() {

        let minValue = Math.min(Math.min(imgPreview.clientHeight, CUTTER_HEIGHT), Math.min(imgPreview.clientWidth, CUTTER_WIDTH))

        cutter.style.height = cutter.style.width = minValue + 'px'

        cutter.style.top = cutter.style.left = null

    }

    resizeResult() {

        imgResult.style.width = (imgPreview.clientWidth * this.percentage).toFixed(2) + 'px'

        imgResult.style.height = (imgPreview.clientHeight * this.percentage).toFixed(2) + 'px'

        imgResult.style.top = imgResult.style.left = null

    }

    refreshPercentage() {

        this.percentage = this.imgResult.parentElement.clientWidth / this.cutter.clientWidth

    }

}

(new SimpleImageCutter({

    fileUpload: fileImageCut,

    imgPreview: imgPreview,

    imgResult: imgResult,

    cutter: cutter

})).init()

这种简单实现存在的问题（下一种思路 html5 canvas）：

1. 拖动效果体验比较差

2. 剪裁后的图片保存问题

源码路径：https://github.com/xiangwenhu/BlogCodes

File API文件操作之FileReader二的更多相关文章

  1. File API文件操作之FileReader

    近来研究点对点的文件传输,想到一种方案FileReader+WebRtc. 当我看到FileReader的时候,哎呀,不错的东西啊,仔细一看属于File API,或者叫做Web API. File A ...

  2. JAVASE02-Unit06： 文件操作——File 、 文件操作—— RandomAccessFile

    Unit06: 文件操作--File . 文件操作-- RandomAccessFile java.io.FileFile的每一个实例是用来表示文件系统中的一个文件或目录 package day06; ...

  3. 【转】c#文件操作大全（二）

    61.文件夹移动到整合操作 FolderDialog aa = new FolderDialog();            aa.DisplayDialog();            if (aa ...

  4. [转]JavaScript文件操作(2)-FileReader

    在上篇文章中,我介绍了在JavaScript操作文件,重点讲了如何取得File对象. 这些对象包含的文件的元数据在上传或者拖放到浏览器中时可以获取到.有了文件当然接下来就是读取文件了. FileRea ...

  5. C使用FILE指针文件操作

    文件的基本概念 所谓“文件”是指一组相关数据的有序集合. 这个数据集有一个名称,叫做文件名.实际上在前面的各章中我们已经多次使用了文件,例如源程序文件.目标文件.可执行文件.库文件 (头文件)等.文件 ...

  6. 总结文件操作函数（二）-C语言

    格式化读写: #include <stdio.h> int printf(const char *format, ...);                   //相当于fprintf( ...

  7. 【File】文件操作（初识文件操作一）

    一,初识文件流 看到标题就知道接下来的所有操作对象都是面对文件进行的.那么问题来了.在java中目录是不是也属于文件呢?答案是yes.既然目录也属于文件,那么对于目录跟文件的区分就显现出来了.在接下来 ...

  8. win32 api 文件操作！

    CreateFile打开文件要对文件进行读写等操作,首先必须获得文件句柄,通过该函数可以获得文件句柄,该函数是通向文件世界的大门. ReadFile从文件中读取字节信息.在打开文件获得了文件句柄之后, ...

  9. Java中常用到的文件操作那些事(二)——使用POI解析Excel的两种常用方式对比

    最近生产环境有个老项目一直内存报警,不时的还出现内存泄漏,导致需要重启服务器,已经严重影响正常服务了.获取生成dump文件后,使用MAT工具进行分析,发现是其中有个Excel文件上传功能时,经常会导致 ...

随机推荐

  1. [睡前灵感and发散思维]由一个简单的数组比较问题而想到的

    前言 据说,一只优秀的程序猿往往会有这样的经历,白天遇到一个绞尽脑汁也无法解决的问题,晚上睡了后,半夜在梦中会灵感涌现,立马起床,打开电脑,一气呵成.第二天如果不看注释,完全不知道自己找到了如此巧妙地 ...

  2. 《Linux调优工具oprofile的演示分析》

    根据CPU架构oprofile采样的触发有两种模式:1) NMI模式: 利用处理器的performance counter功能, 指定counter的类型type和累进数量count. 比如 type ...

  3. 在websphere上部署集群应用程序-工作记录

    1) 创建web集群.client集群,添加集群托管节点,根据需求来,我的需求是两个应用部署到4个服务器上,属于1主3备模式 2) 创建webspere变量:选择你需要的集群作用域,新建资源   (作 ...

  4. C#中StreamReader读取中文时出现乱码问题总结

    之前有一篇文章" C#读取及写入配置文件教程"(http://blog.csdn.net/lisenyang/article/details/47291083)当中有一个问题就是在 ...

  5. 利用java mail发送邮件（转）

    JavaMail是SUN提供给开发者在应用程序中实现邮件发送和接收功能而提供的一套标准开发类库,支持经常使用的邮件协议,如SMTP.POP3.IMAP.开发者使用JavaMail编写邮件程序时,无需考 ...

  6. 自己定义定时器（Timer）

    近期做项目的时候,用到了java.util.Timer定时器类.也初步使用了,个人感觉不错.只是,在某些方面Timer类无法满足项目的需求.比方,在使用Timer时,调用schedule()方法之后( ...

  7. Linux 高速操作IOport

    在嵌入式设备中对GPIO的操作是最主要的操作. 一般的做法是写一个单独驱动程序,网上大多数的样例都是这种.事实上linux以下有一个通用的GPIO操作接口.那就是我要介绍的 "/sys/cl ...

  8. clientHeight、offsetHeight、scrollHeight详解

    网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offs ...

  9. 在Laravel中使用swoole来取代nginx作为http服务器

    1.是什么限制Laravel框架的速度? Laravel框架启动的时候需要加载很多文件,再加上其出了名的生态环境好,所以在开发过程中我们就会发现有非常多的已经造好的轮子,这也就使得Laravel的一次 ...

  10. MPSOC之4——petalinux提取源码

    petalinux使用太不方便,捆绑的太死板,也不通用,还不如直接用编译器来的简单高效. 本文说明从petalinux中提取出源代码的过程,前提是已经petalinux-build完成. 1. ubo ...