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

随机推荐

day2-Python基本数据类型介绍
百度云连接链接:https://pan.baidu.com/s/1hsGQx7m 密码:u07q
Mysql的安装和图形化界面的使用
访问mysql网址:https://dev.mysql.com/ 下面需要登录你的oracle账号进行下载就好~ 下载之后是一解压包形式存在的~ 解压之后的文件这里我新建了my.ini的文件~将my ...
windows 环境安装oracle11g db 或者RAC 防火墙必需要透过的进程，port
1.Firewall Exceptions for Oracle Database For basic database operation and connectivity from remote ...
《Effective Modern C++》翻译--简单介绍
北京时间2016年1月9日10:31:06.正式開始翻译.水平有限,各位看官若有觉得不妥之处,请批评指正. 之前已经有人翻译了前几个条目,有些借鉴出处:http://www.cnblogs.com/m ...
Android系统匿名共享内存（Anonymous Shared Memory）Java调用接口分析
一.Ashmem驱动程序 ~/Android/kernel/goldfish ----include ----linux ----ashmem.h ----mm ----ashmem.c 驱动程序具体 ...
在企业和应用市场发布Office Add-in
作者:陈希章发表于 2017年12月20日我已经写了很多关于Office Add-in的内容,而且我相信你已经尝试过创建一两个Add-in了吧.作为一个开发人员,你有多种方式在自己的机器上使用你的 ...
Java快速排序算法
快速排序算法思想: 快速排序(Quicksort)是对冒泡排序的一种改进. 快速排序由C. A. R. Hoare在1962年提出.它的基本思想是:通过一趟排序将要排序的数据分割成独立的两部分,其中一 ...
mysql新建数据库，并设置charset为utf8，使用utf8_general_ci字符集校验结果
一. 实现功能有时候在linux服务器端, 会在mysql命令行中, 创建数据库, 今天讲一下怎么在创建数据库时, 把charset设置为utf8,collate设置为utf8_general_ci ...
Asynchronous MQTT client library for C （MQTT异步客户端C语言库-paho）
原文:http://www.eclipse.org/paho/files/mqttdoc/MQTTAsync/html/index.html MQTT异步客户端C语言库用于C的异步 MQTT 客 ...
thymeleaf模板的使用（转）
作者:纯洁的微笑出处:http://www.ityouknow.com/ 在上篇文章springboot(二):web综合开发中简单介绍了一下thymeleaf,这篇文章将更加全面详细的介绍thym ...

File API文件操作之FileReader二

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

随机推荐

热门专题