博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
图片上传及图片处理
阅读量:5960 次
发布时间:2019-06-19

本文共 5579 字,大约阅读时间需要 18 分钟。

一.input type=file与文件上传

复制代码

如果想使用浏览器原生特性实现文件上传(如图片)效果,父级的form元素有个东西不能丢

enctype="multipart/form-data"复制代码

enctype属性规定在发送到服务器之前应该如何对表单数据进行编码,默认的编码是:”application/x-www-form-urlencoded“。对于普通数据是挺适用的,但是,对于文件,科科,就不能乱编码了,该什么就是什么,只能使用multipart/form-data作为enctype属性值。

只上传文件夹而不是文件
 复制代码
UI自定义
 
复制代码
accept属性(用来指定浏览器接受的文件类型)
 //只允许传图片  //只允许传图片``` accept属性是MIME类型: 复制代码

accept="application/pdf" accept="audio/x-mpeg" accept="text/html" .accept="video/x-mpeg2" ``` 多个属性值使用逗号分隔:

 复制代码

二.图片上传/压缩/水印/方向问题

:该方法会读取指定的 Blob 或 File 对象。读取操作完成的时候,readyState 会变成已完成(DONE),并触发 loadend 事件,同时 result 属性将包含一个data:URL格式的字符串(base64编码)以表示所读取文件的内容。
返回一个包含图片展示的 data URI 。可以使用 type 参数其类型,默认为 PNG 格式。图片的分辨率为96dpi
//语法:canvas.toDataURL(type, encoderOptions); //type(可选):图片格式,默认为 image/png; //encoderOptions(可选) :在指定图片格式为 image/jpeg 或 image/webp的情况下,可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围,将会使用默认值 0.92。//返回值:包含 data URI 的DOMString。 复制代码

2.1图片上传

//html 
//水印小照片

//合成后的照片 //js var eleUploadFile = document.getElementById('uploadFile'); var compounded = document.getElementById('compounded');eleUploadFile.addEventListener('change', function (event) { var file = event.target.files[0]; //获取图片资源 if (!event.type.match('image.*')) {// 只选择图片文件 return false; } var reader = new FileReader(); reader.readAsDataURL(file); // 读取文件 exif(file); //旋转图片 reader.onloadend=function(e){ //文件读取结束 var base64 = e.target.result; if (base64.length > 1024 * 50) { console.error('图片尺寸请小于50K'); return; } var compressImg = compress(base64); //压缩函数 var compoundImg = compoundImg(base64,function(url){ var size = 180 / (window.devicePixelRatio || 1); compounded.innerHTML = ''; }) } })复制代码

function compress(readerResult) { //readerResult-->传入文件base64结果     var img = new Image();     img.src = readerResult;     if(readerResult.length<80000) {         return readerResult ;//小于80K的不压缩     }     //用于压缩图片的canvas     let canvas = document.createElement("canvas");     let ctx = canvas.getContext("2d");     //画图区域     canvas.width = img.naturalWidth;     canvas.height = img.naturalHeight;     //铺底色     ctx.fillStyle = "#fff";     ctx.fillRect(0, 0, canvas.width, canvas.height);     ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);     //进行最小压缩     var dataURL = canvas.toDataURL("image/jpeg",0.9);     return dataURL; }复制代码

function compoundImg(url,callback) { //url -->合成水印较大的那张图的base64码     var eleImgCover = document.getElementById('imgCover');     var canvas = document.createElement('canvas');     var size = 180; //水印大小     canvas.width = size;     canvas.height = size;     var context = canvas.getContext('2d'); // 这是上传图像     var imgUpload = new Image();     imgUpload.onload = function () { // 绘制         context.drawImage(imgUpload, 0, 0, size, size, 0,0, size, size); // 再次绘制(绘制上水印小照片)         context.drawImage(eleImgCover, 0, 0, size, size, 0,0, size, size); // 回调 callback(canvas.toDataURL('image/png'));    };     imgUpload.src = url; } 复制代码

2.4 处理图片方向信息

 //先引入EXIF.js function exif(file) {     var Orientation = '';     EXIF.getData(file, function() {         console.log(EXIF.pretty(this));         EXIF.getAllTags(this);         console.log(EXIF.getTag(this, 'Orientation'));        Orientation = EXIF.getTag(this, 'Orientation'); //return; });         if (navigator.userAgent.match(/iphone/i)) { //如果方向角不为1,都需要进行旋转            if(Orientation != "" && Orientation != 1){                 switch(Orientation){                     case 6://需要顺时针(向左)90度旋转                        console.log('需要顺时针(向左)90度旋转');                        break;                     case 8://需要逆时针(向右)90度旋转                        console.log('需要顺时针(向右)90度旋转');                         break;                     case 3://需要180度旋转 alert('需要180度旋转');                        console.log('需要180度旋转');                         break;                 }             }     } } 复制代码

2.5 合成图片

function html2canvas(node) { // node为要合成图片的dom节点    const weNeedImageUrl = ''    const scale = window.devicePixelRatio    // 防止在高倍屏下合成图片过于模糊    const createCanvas = document.createElement('canvas')    createCanvas.width = node.offsetWidth * scale    createCanvas.height = node.offsetHeight * scale    const ctx = createCanvas.getContext('2d')    ctx.scale(scale, scale)    html2canvas(node, {        scale: scale,        dpi: 384,        canvas: createCanvas,        width: node.offsetWidth,        height: node.offsetHeight      }).then((canvas) => {        // 合成图片后的base64码        let domToImgUrl = canvas.toDataURL('image/jpeg', 0.92)        console.log('合成图片大小:', domToImgUrl.length)                // 下面是将图片的base64以blob形式上传到阿里云文件服务器,获取图片地址        let domImageArr = domToImgUrl.split(',')        let mime = domImageArr[0].match(/:(.*?);/)[1]                 // 获取图像类型        let decodeData = atob(domImageArr[1])                         // 解码base64        let decodeDataLength = decodeData.length        let uInt8array = new Uint8Array(decodeDataLength)        //Uint8Array类型数组表示的8位无符号整数数组。内容被初始化为0        while (decodeDataLength--) {            uInt8array[decodeDataLength] = decodeData.charCodeAt(decodeDataLength)        }        let blob = new Blob([uInt8array], { type: mime })        let formData = new FormData()        formData.append('file', blob, 'image.png')        // 上传该图片到阿里云        appUploadFile(formData).then(data => {            weNeedImageUrl = data.data[0]            return weNeedImageUrl        })    })    }复制代码

转载于:https://juejin.im/post/5c94897e5188252d5168f7c5

你可能感兴趣的文章
vi 命令
查看>>
1.1
查看>>
Elasticsearch 安装与启动
查看>>
[logstash-input-redis]插件使用详解
查看>>
同步代码块应用之取钱问题、线程安全问题之线程同步机制(同步函数)
查看>>
在Windows Server 2008 R2上部署ASP.NET MVC应用
查看>>
优化应用的电池寿命(笔记)-1
查看>>
SSH Secure Shell Client
查看>>
error: stray '\343' in program
查看>>
技术分享
查看>>
JFinal源码分析------初始化那些事儿
查看>>
Qt creator :qmake xxx时发生错误
查看>>
chrome安装后无法使用问题
查看>>
ckeditor4 自定义插件 多图上传 图片上传
查看>>
处理 允许远程协助连接这台计算机 灰色
查看>>
使用Jquery 加载页面时调用JS
查看>>
css+div+jquery弹出层
查看>>
求职相关(链接,不定期更新)
查看>>
pdo 连接数据库 报错 could not find driver 解决方法
查看>>
设计模式之策略模式
查看>>