File API文件操作之FileReader二

上一篇说了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二的更多相关文章

File API文件操作之FileReader
近来研究点对点的文件传输,想到一种方案FileReader+WebRtc. 当我看到FileReader的时候,哎呀,不错的东西啊,仔细一看属于File API,或者叫做Web API. File A ...
JAVASE02-Unit06：文件操作——File 、文件操作—— RandomAccessFile
Unit06: 文件操作--File . 文件操作-- RandomAccessFile java.io.FileFile的每一个实例是用来表示文件系统中的一个文件或目录 package day06; ...
【转】c#文件操作大全（二）
61.文件夹移动到整合操作 FolderDialog aa = new FolderDialog(); aa.DisplayDialog(); if (aa ...
[转]JavaScript文件操作(2)-FileReader
在上篇文章中,我介绍了在JavaScript操作文件,重点讲了如何取得File对象. 这些对象包含的文件的元数据在上传或者拖放到浏览器中时可以获取到.有了文件当然接下来就是读取文件了. FileRea ...
C使用FILE指针文件操作
文件的基本概念所谓“文件”是指一组相关数据的有序集合. 这个数据集有一个名称,叫做文件名.实际上在前面的各章中我们已经多次使用了文件,例如源程序文件.目标文件.可执行文件.库文件 (头文件)等.文件 ...
总结文件操作函数（二）-C语言
格式化读写: #include <stdio.h> int printf(const char *format, ...); //相当于fprintf( ...
【File】文件操作（初识文件操作一）
一,初识文件流看到标题就知道接下来的所有操作对象都是面对文件进行的.那么问题来了.在java中目录是不是也属于文件呢?答案是yes.既然目录也属于文件,那么对于目录跟文件的区分就显现出来了.在接下来 ...
win32 api 文件操作！
CreateFile打开文件要对文件进行读写等操作,首先必须获得文件句柄,通过该函数可以获得文件句柄,该函数是通向文件世界的大门. ReadFile从文件中读取字节信息.在打开文件获得了文件句柄之后, ...
Java中常用到的文件操作那些事(二)——使用POI解析Excel的两种常用方式对比
最近生产环境有个老项目一直内存报警,不时的还出现内存泄漏,导致需要重启服务器,已经严重影响正常服务了.获取生成dump文件后,使用MAT工具进行分析,发现是其中有个Excel文件上传功能时,经常会导致 ...

随机推荐

C#真的过时了吗?
现在有一种言论:C#过时了!!! 有人说现在是BS的时代,C#开发BS网站的那一套,相对于Java.PHP来说,效率太低了! 有人说现在是移动互联网时代,C#作为微软主推的语言,无法开发移动应用成为其 ...
关于sqlmap使用手册
sqlmap 使用手册官方wiki Github sqlmap也是渗透中常用的一个注入工具,可以用来检测sql注入漏洞. 功能与作用完全支持MySQL,Oracle,PostgreSQL,Micr ...
运行期以索引获取tuple元素-C++14
在编译期很容易根据索引来获取对应位置的元素,因为 tuple 的帮助函数 std::get<N>(tp) 就能获取 tuple 中第 N 个元素.然而我们却不能直接在运行期通过变量来获取 ...
巧用第三方高速开发Android App 热门第三方SDK及框架
巧用第三方高速开发Android App 热门第三方SDK及框架历经大半年的时间,最终是把这门课程给录制出来了,也就在今天,正式在慕课网上上线了项目地址:巧用第三方高速开发Android App ...
CentOS安装java and javac(java执行环境和开发环境)
[root@localhost usr]# yum install java Loaded plugins: fastestmirror, refresh-packagekit, security R ...
SpringMVC实现JSON与前台交互
这几天忙着做学校的项目,感觉好久没有更新博客了,来整理一下. 由于要实现的功能是表单联动,只能自己去写ajax来实现提交给后台接口了,好久没有写前端,好多东西都忘记了,只能可怜巴巴的用原生的js去实现 ...
springMVC学习总结（三）数据绑定
springMVC学习总结(三)数据绑定一.springMVC的数据绑定,常用绑定类型有: 1.servlet三大域对象: HttpServletRequest HttpServletRespons ...
自学WPF之Binding（二）
没有Source的Binding,使用ContentText作为Binding源: 上一篇是把CLR类型对象当作指定为Binding的Source,两种方法:一是把对象赋值给Binding.Sourc ...
《调试九法——软硬件错误的排查之道》【PDF】下载
<调试九法--软硬件错误的排查之道>[PDF]下载链接: https://u253469.ctfile.com/fs/253469-231196352 内容简介 <调试九法:软硬件错 ...
变量声明declare，简单运算符运算，变量测试与内容替换
declare -/+ 选项变量名 - 设类型 + 取消类型 -i 设为整型 -x 设为环境变量 -p 显示类型属性(property) [root@localhost ~]# a= [root@l ...

File API文件操作之FileReader二

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

随机推荐

热门专题