登录  /  注册
首页 > web前端 > H5教程 > 正文

H5使用react组件实现拍照、选择图片上传

不言
发布: 2018-12-31 09:45:40
转载
7572人浏览过

本篇文章给大家带来的内容是关于h5使用react组件实现拍照、选择图片上传,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

前段时间项目重构,改成SSR的项目,但之前用的图片选择上传组件不支持SSR(server-side-render)。遂进行了调研,发现很多的工具。但有的太大,有的使用麻烦,有的不满足使用需求。决定自己写一个h5移动端图片上传组件。图片上传是一个比较普遍的需求,PC端还好,移动端就不是特别好做了。下面将过程中一些重点的问题进行简单的记录。

重点

1.关于input

选择功能使用<input>标签实现。属性accept='image/*',:capture表示,可以捕获到系统默认的设备,比如:camera--照相机;camcorder--摄像机;microphone--录音。如果设置了capture="camera",那么默认使用相机,存在部分机型无法调用相机的问题,我们这里不设置。允许多选multiple,加上onchange事件的回调函数。最终input大概长这个样子:

<input>
登录后复制

当然,这个input很丑,我们可以通过设置`opacity:0`,通过定位将我们需要的选择按钮样式覆盖上去。让它更加迷人一些。

2.关于选择预览功能

选择图片后能预览是一个常见的功能,这里抛开样式,只说代码实现。在onchange的回调函数中,我们能通过e.target.files拿到所选择的文件,但是文件是无法展示在页面上的,通常的做法是使用reader.readAsDataURL(file)转为base64然后展示在页面上。我这边采用九宫格展示,每个图片是一个canvas。考虑到不同图片宽高比的问题,我先通过reader.readAsDataURL(file)拿到base64文件。然后创建一个通过九宫格的canvas宽高比绘制图像,使图片内容在不失真的情况下铺满整个canvas。

fileToCanvas (file, index) {//文件
        let reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = (event) =&gt; {
            let image = new Image();
            image.src = event.target.result;
            image.onload = () =&gt; {
                let imageCanvas = this['canvas' + index].getContext('2d');
                let canvas = { width: imageCanvas.canvas.scrollWidth * 2, height: imageCanvas.canvas.scrollHeight * 2 };
                let ratio = image.width / image.height;
                let canvasRatio = canvas.width / canvas.height;
                let xStart = 0; let yStart = 0; let renderableWidth; let renderableHeight;
                if (ratio &gt; canvasRatio) { 
                // 横向过大,以高为准,缩放宽度
                    let hRatio = image.height / canvas.height;
                    renderableHeight = image.height;
                    renderableWidth = canvas.width * hRatio;
                    xStart = (image.width - renderableWidth) / 2;
                }
                if (ratio <h3>3.文件上传的扩展名获取</h3><p>部分机型拍照时文件通过onchange事件拿到的文件是<code>blob</code>(小米6等)此时通过<code>blob.type</code>手动判断扩展名。</p><h3>4.ios拍照方向获取</h3><p>当ios拍照上传后发现文件被旋转了,本地文件确是正常的,这个问题的原因这里不作详细解释。有兴趣的可以搜一下。所以我们需要检测orientation,并将图像旋转回正常方向。获取orientation有现成的很多库如Exif.js。但是这个库有些大,为了这个小需求引入似乎不太值得。stackoverflow上有很多现成的获取图片方向的代码。<br>   稍微改了下:</p><pre class="brush:php;toolbar:false">getOrientation (file) {
        return new Promise((resolve, reject) =&gt; {
            let reader = new FileReader();
            reader.onload = function (e) {
            //e.target.result为base64编码的文件
                let view = new DataView(e.target.result);
                if (view.getUint16(0, false) !== 0xffd8) {
                    return resolve(-2);
                }
                let length = view.byteLength;
                let offset = 2;
                while (offset <p>//返回值:1--正常,-2--非jpg,-1--undefined</p><h3>5.ios照片方向修正</h3><p>正常的图像orientation应该是1,于是我们将file转为canvas,使用canvas的transform方法对canvas进行变换, 参考。最后通过canvas.toDataURL('')拿到base64编码的方向正常的base64图片,再将base64转为blob进行上传;</p><pre class="brush:php;toolbar:false">    //重置文件orientation
resetOrientationToBlob (file, orientation) {
    return new Promise((resolve, reject) =&gt; {
        let reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = (event) =&gt; {
            let image = new Image();
            image.src = event.target.result;
            image.onload = () =&gt; {
                let width = image.width;
                let height = image.height;
                let canvas = document.createElement('canvas');
                let ctx = canvas.getContext('2d');
                if (orientation &gt; 4 &amp;&amp; orientation <p><strong>最后</strong></p><p>图片上传,这部分应该比较easy。通过FormData的形式将文件上传即可。以上代码仅是部分功能的伪代码,不是所有功能的最终实现。</p><p>能折腾就折腾一下,最后你会发现,学到了很多东西,但还是别人的轮子好用2333。</p><p class="comments-box-content"><br></p>
登录后复制

以上就是H5使用react组件实现拍照、选择图片上传的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:segmentfault网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号