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文件上传功能时,经常会导致 ...

随机推荐

QScintilla 编译
直接上英文了,不翻译了.看不懂的可以留言哈. ———————————————————————————————————————— Installation As supplied QScintilla ...
MVC系列——一个异常消息传递引发的思考
前言:最近在某个项目里面遇到一个有点纠结的小问题,经过半天时间的思索和尝试,问题得到解决.在此记录一下解决的过程,以及解决问题的过程中对.net里面MVC异常处理的思考.都是些老生常谈的问题,不多说, ...
【CSS3】颜色表示方式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
AutoLayout的几种方法
1.XIB 2.Fram 3.屏幕比例适配(个人比较推荐) iOS屏幕适配(尺寸适配) 4.NSLayoutConstraint. 5.Masonry 概述使用 Objective-C 纯代码编 ...
在IntelliJ IDEA里创建简单的基于Maven的SpringMVC项目
后来发现了一种更加方便的创建方式,即第一步不选择Create from archetype,创建完毕后打开Project Structure-Modules,然后添加Web,但是注意添加的Web里面的 ...
Android Activity生命周期详细解析
概况讲Android Activity那怎么都绕不过这张图,这篇文章也是围绕这幅图详细分析. 背景假设这是你的APP,以此为背景,下面的每个part请结合上图理解. #Case 1 当按下app启 ...
【model模型传入view的数据类型错误】传入字典的模型项的类型为“System.Data.Entity.Infrastructure.DbQuery`1[MapScience.PovertyAlleviation.Web.Models.Qu
出现这个问题的原因是控制器中传给view的数据类型与View中设置的model类型不一致导致,比如控制器返回的IList类型的,而你在View里面model设置的是IEnumerable<> ...
Java I/O---类体系总结
1.Java I/O常用 (1)File 对文件系统中文件以及文件夹进行封装的对象,可以通过对象的思想来操作文件和文件夹. (2)FileInputStream 从文件系统中的某个文件中获得输入字节: ...
ArcGIS API for JavaScript 4.3 与ArcGIS Server联动使用【地图服务】
[前言] 有好些网友问我怎么使用Server发布的地图服务了,其实非常的简单. 我在这里先声明:不提供Server软件,需要的请自行使用互联网搜索资源: 不阐述Server如何发布各各种服务,但是我会 ...
Find all factorial numbers less than or equal to N
A number N is called a factorial number if it is the factorial of a positive integer. For example, t ...

File API文件操作之FileReader二

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

随机推荐

热门专题