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

随机推荐

tomcat线程初探
博主:handsomecui,希望路过的各位大佬留下你们宝贵的意见,在这里祝大家冬至快乐. 缘由: 初探缘由,在业务层想要通过(当前线程的栈)来获取到控制层的类名,然后打日志,可是发现并不能通过当前线 ...
UAC
UAC and Security Shield Icon UAC in Wiki User Account Control (UAC) is a technology and security inf ...
mysql本地訪问linuxserver，出现SQLSTATE[HY000] [1130] Host '127.0.0.1' is not allowed to connect to this
解决方式:网上看了说.更改mysql库的user表,加入一条host为%的数据就能够.可是还是不行. 后来,直接登录mysql.给訪问加权限就能够了. 运行 [root@iZ25p77kem7Z ~] ...
【ASP.NET】DataTable序列化
问题描述主要解决DataTable数据转化为JSON,从Controller传递数据给View的问题. 1 内容区提供如下方法,仅供参考 public static class ObjectE ...
一位10年Java工作经验的架构师聊Java和工作经验
从事近十年的 JavaEE 应用开发工作,现任阿里巴巴公司系统架构师.对分布式服务架构与大数据技术有深入研究,具有丰富的 B/S 架构开发经验与项目实战经验,擅长敏捷开发模式.国内开源软件推动者之一, ...
「mysql优化专题」详解引擎(InnoDB,MyISAM)的内存优化攻略？（9）
注意:以下都是在MySQL目录下的my.ini文件中改写(技术文). 一.InnoDB内存优化 InnoDB用一块内存区域做I/O缓存池,该缓存池不仅用来缓存InnoDB的索引块,而且也用来缓存Inn ...
Grafana4.2安装
一.文件准备 1.1 文件名称 grafana-4.2.0-1.x86_64.rpm 1.2 下载地址 https://grafana.com/grafana/download 二.工具准备 2.1 ...
LeetCode #1 TwoSum
Description Given an array of integers, return indices of the two numbers such that they add up to a ...
iOS Xcode及模拟器SDK下载
原文: Xcode及模拟器SDK下载如果你嫌在 App Store 下载 Xcode 太慢,你也可以选择从网络上下载: Xcode下载(Beta版打的包是不能提交到App Store上的) 绝对官方 ...
Java I/O---Reader & Writer(字符流)
1.Reader & Writer 当我们初次看见Reader和Writer类时,可能会以为这是两个用来替代InputStream和OutputStreamt的类,但实际上并非如此. 尽管一些 ...

File API文件操作之FileReader二

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

随机推荐

热门专题