背景

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

重点

1.关于input


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


    &lt;input type='file'
    className={classes.picker}
    accept='image/*'
    multiple
    capture="camera"
    onChange={this.onfileChange} /&gt;

    当然,这个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 &lt; canvasRatio) {
    // 横向过小,以宽为准,缩放高度
    let wRatio = image.width / canvas.width;
    renderableWidth = image.width;
    renderableHeight = canvas.height * wRatio;
    yStart = (image.height - renderableHeight) / 2;
    }
    imageCanvas.drawImage(image, xStart, yStart, renderableWidth, renderableHeight, 0, 0, canvas.width * 2, canvas.height);
    };
    };
    }

3.文件上传的扩展名获取


  • 部分机型拍照时文件通过onchange事件拿到的文件是blob(小米6等)此时通过blob.type手动判断扩展名。

4.ios拍照方向获取


  • 当ios拍照上传后发现文件被旋转了,本地文件确是正常的,这个问题的原因这里不作详细解释。有兴趣的可以搜一下。所以我们需要检测orientation,并将图像旋转回正常方向。获取orientation有现成的很多库如Exif.js。但是这个库有些大,为了这个小需求引入似乎不太值得。stackoverflow上有很多现成的获取图片方向的代码。
    稍微改了下:


    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 &lt; length) {
    let marker = view.getUint16(offset, false);
    offset += 2;
    if (marker === 0xffe1) {
    let tmp = view.getUint32(offset += 2, false);
    if (tmp !== 0x45786966) {
    return resolve(-1);
    }
    let little = view.getUint16(offset += 6, false) === 0x4949;
    offset += view.getUint32(offset + 4, little);
    let tags = view.getUint16(offset, little);
    offset += 2;
    for (let i = 0; i &lt; tags; i++) {
    if (view.getUint16(offset + i * 12, little) === 0x0112) {
    return resolve(view.getUint16(offset + i * 12 + 8, little));
    }
    }
    } else if ((marker &amp; 0xff00) !== 0xff00) {
    break;
    } else {
    offset += view.getUint16(offset, false);
    }
    }
    return resolve(-1);
    }; reader.readAsArrayBuffer(file.slice(0, 64 * 1024));
    });
    }

    //返回值:1--正常,-2--非jpg,-1--undefined

5.ios照片方向修正


正常的图像orientation应该是1,于是我们将file转为canvas,使用canvastransform方法对canvas进行变换, 参考。最后通过canvas.toDataURL('')拿到base64编码的方向正常的base64图片,再将base64转为blob进行上传;



    //重置文件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 &lt; 9) {
canvas.width = height;
canvas.height = width;
} else {
canvas.width = width;
canvas.height = height;
} switch (orientation) {
case 2:
ctx.transform(-1, 0, 0, 1, width, 0);
break;
case 3:
ctx.transform(-1, 0, 0, -1, width, height);
break;
case 4:
ctx.transform(1, 0, 0, -1, 0, height);
break;
case 5:
ctx.transform(0, 1, 1, 0, 0, 0);
break;
case 6:
ctx.transform(0, 1, -1, 0, height, 0);
break;
case 7:
ctx.transform(0, -1, -1, 0, height, width);
break;
case 8:
ctx.transform(0, -1, 1, 0, 0, width);
break;
default:
ctx.transform(1, 0, 0, 1, 0, 0);
} ctx.drawImage(image, 0, 0, width, height);
let base64 = canvas.toDataURL('image/png');
let blob = this.dataURLtoBlob(base64);
resolve(blob);
};
};
});

}

最后

  • 图片上传,这部分应该比较easy。通过FormData的形式将文件上传即可。以上代码仅是部分功能的伪代码,不是所有功能的最终实现。
  • 能折腾就折腾一下,最后你会发现,学到了很多东西,但还是别人的轮子好用2333。

来源:https://segmentfault.com/a/1190000017564833

H5拍照、选择图片上传组件核心的更多相关文章

  1. android拍照选择图片上传服务器自定义控件

    做android项目的时候总免不了遇到图片上传功能,虽然就是调用android系统的拍照和相册选择功能,但是总面部了把一大推代码写在activity里,看上去一大推代码头都昏了.不如把这些功能都集成一 ...

  2. HTML5 Plus 拍照或者相册选择图片上传

    HBuilder+HTML5 Plus+MUI实现拍照或者相册选择图片上传,利用HTML5 Plus的Camera.Gallery.IO.Storage和Uploader来实现手机APP拍照或者从相册 ...

  3. Jquery图片上传组件,支持多文件上传

    Jquery图片上传组件,支持多文件上传http://www.jq22.com/jquery-info230jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传.取消. ...

  4. vue图片上传组件

    前言:很多项目中都需要用到图片上传功能,而其多处使用的要求,为了避免重复造轮子,让我决定花费一些时间去深入了解,最终封装了一个vue的图片上传组件.现将总结再次,希望有帮助. Layout <d ...

  5. 微信小程序简单封装图片上传组件

    微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用, ...

  6. 基于Node的React图片上传组件实现

    写在前面 红旗不倒,誓把JavaScript进行到底!今天介绍我的开源项目 Royal 里的图片上传组件的前后端实现原理(React + Node),花了一些时间,希望对你有所帮助. 前端实现 遵循R ...

  7. 分享一个react 图片上传组件 支持OSS 七牛云

    react-uplod-img 是一个基于 React antd组件的图片上传组件 支持oss qiniu等服务端自定义获取签名,批量上传, 预览, 删除, 排序等功能 需要 react 版本大于 v ...

  8. 图片上传组件webuploader

    前端组件webuploader 当时也是搞了很久参考这种demo,但是没记.现在事后大致总结下.直接上大概代码(我使用asp.net  MVC来做的): 执行顺序:(get)Record/Add——A ...

  9. [转]微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传

    本文转自:http://blog.csdn.net/qq_31383345/article/details/53014610 今天遇到微信小程序的用户头像设置功能,做笔记. 先上gif: 再上代码: ...

随机推荐

  1. C# 压缩 解压 复制文件夹,文件的操作

    命名空间:namespace System.IO.Compression 压缩: //目标文件夹 string fileDirPath = "/Downloads/试题" + us ...

  2. SpringBoot 使用fastjson

    spring boot默认使用的json解析框架是jackson,替换为fastjson有两种方式 1.继承WebMvcConfigurerAdapter @SpringBootApplication ...

  3. 如何绘制ER图

    先画出多个实体(用长方形表示),然后是联系类型(菱形),和属性(椭圆).

  4. MySQL GROUP_CONCAT长度限制引发的一场灾难

    GROUP_CONCAT函数是对查处的分组数据对于分组列相同的数据合并成一列用逗号隔开的函数. 但是该函数的长度有个默认限制,默认是1024个字符,超过就会截断,从而导致用count统计GROUP_C ...

  5. cube.js 开源模块化分析框架

    cube.js 是一款很不错的模块化web 应用分析框架.cube.js 的设计主要是面向serverless 服务, 但是同时也支持所有rdbms, cube.js不是一个单体应用,包含了以下部分: ...

  6. Java方法命名之“由简入繁”原则

    1.访问控制层(Controller 层)中的方法命名方向是简洁明了,向着自然化语言方向靠拢,比如“更新用户”,建议命名为“updateUser”,而非“updateUserById”,实际上我们更新 ...

  7. python反爬之用户代理

    # requests是第三方库,需要安装 pip install requests import requests import random # 通常很多网站都会设置检测请求头中的User-Agen ...

  8. The twentieth day

    Knowledge is power 知识就是力量 You're unique,nothing can replace you.你举世无双,无人可以替代.

  9. 云集微助手安装教程和授权说明old

    安装教程 一 .手机越狱(如果已经越狱请跳过此步,直接进行第二步) 越狱教程:http://jailbreak.25pp.com/yueyu/ 二 .安装触动精灵(如果你已安装触动精灵最新版请跳过此步 ...

  10. sharepoint2007就地升级2010系列(二)环境概述及升级前准备

    环境介绍:1台2GB的虚机 现在是windows server 2008 sp2 X64 +SQL 2005+SQL2005 sp3+sharepoint2007+sharepoint2007SP2 ...