Vue图片处理解决方案,一篇就够了

这篇具有很好参考价值的文章主要介绍了Vue图片处理解决方案,一篇就够了。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、阅读须知

小帅爆肝整理的这篇文章,内容比较多,帅帅的你值得看一看,有解决方案的核心代码,放到项目中可以直接使用
最近还会更新关于“图片横向合并、纵向合并、图片编辑”的另一篇文章,敬请期待!

二、解决的问题

  • 使用canvas处理图片旋转、导入问题
  • 目前来看,在前端对图片文件进行处理,再传到服务端,性能上是可以的,不必要图片处理逻辑在服务端实现

三、知识储备

  1. 使用<input type="file">标签得到的File文件格式对象如下
    Vue图片处理解决方案,一篇就够了
  2. 图片Base64编码的格式(可以直接使用<img> <el-image>标签进行渲染)
    Vue图片处理解决方案,一篇就够了

四、解决方案

如果使用canvas实现对图片的旋转目前有两种方案文章来源地址https://www.toymoban.com/news/detail-455621.html

  1. 利用canvas的translate()平移函数 + rotate()旋转函数 + drawImage()函数 实现,这种方式存在更复杂的数学计算问题
  2. 利用canvas的 rotate()旋转函数 + drawImage()函数 实现(本篇使用的解决方案),下文提供代码案例

五、核心代码

  • 解决方案2对应的核心代码,解决将图片顺时针旋转90°、180°、270°问题
  • 如下代码drawImage()函数中的img参数为new Image()对象,或者其它符合函数要求的参数类型
// 创建canvas
const selfCanvas = document.createElement('canvas')
const selfCtx = selfCanvas.getContext('2d')

if (angle == '90') { // 顺时针旋转90度
  selfCanvas.width = img.height
  selfCanvas.height = img.width
  selfCtx.rotate(90 * Math.PI / 180);
  selfCtx.drawImage(img, 0, 0, img.width, -img.height)       
} else if (angle == '180') { // 顺时针旋转180度
  selfCanvas.width = img.width
  selfCanvas.height = img.height
  selfCtx.rotate(180 * Math.PI / 180)
  selfCtx.drawImage(img, -img.width, -img.height, img.width, img.height)
} else if (angle == '270') { // 顺时针旋转270度
  selfCanvas.width = img.height
  selfCanvas.height = img.width
  selfCtx.rotate(270 * Math.PI / 180)
  selfCtx.drawImage(img, -img.width, 0, img.width, img.height)        
} else { // 不进行任何旋转
  selfCanvas.width = img.width
  selfCanvas.height = img.height
  selfCtx.drawImage(img, 0, 0, img.width, img.height)
}

六、参考资料

  1. 得到图片文件File的URL
img.src = URL.createObjectURL(imgFile)
  1. 相关api函数方法
  • createObjectURL(obj):返回一个URL 对象表示指定的 File 对象(生成blob:http://www.xxxx.com/xx的链接,可以直接在网页上打开File内容)或 Blob 对象(用于下载),obj为 File 对象、Blob 对象或者 MediaSource 对象
  • revokeObjectURL(objURL):在每次调用 createObjectURL() 方法时,都会创建一个新的 URL 对象,即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时,每个对象必须通过调用 URL.revokeObjectURL() 方法来释放,objURL为URL.createObjectURL(obj) 返回的对象
  • arr = new Uint8Array(length):返回一个长度为length的8位无符号整型数组(存储大小为0~256,负数会自动加256转为整数,超出-256),创建时内容被初始化为0
  • new Blob(arr,options):返回一个blob对象(可理解为二进制的数据对象),常用用于文件下载
  • canvas.toBlob(callback, type, quality):创造 Blob 对象,用以展示 canvas 上的图片;这个图片文件可以被缓存或保存到本地,具体参数:
    • allback:回调函数,可获得一个单独的 Blob 对象参数。如果图像未被成功创建,可能会获得 null 值
    • type:指定图片格式,默认格式(未指定或不支持)为 image/png
    • quality:值在 0 与 1 之间,当请求图片格式为 image/jpeg 或者 image/webp 时用来指定图片展示质量。如果这个参数的值不在指定类型与范围之内
  1. 在h5中,使用input的type="file"和capture="camera"这两个属性就可以调用摄像头
  2. 如果使用document.createElement()动态创建的元素,通过如下的方法得到输入的值
// 创建一个input元素
var inputElem = document.createElement("input");
// 获取input的值
var inputValue = inputElem.value;
// 如果input标签type="file"
// 得到文件对象File
var file = inputElem.files
  1. 如果input标签不是动态创建的,是已经写好的html元素,则可以在change=“methodsName(e)”,通过e.target.files获得文件对象
  2. Vue中可以使用如下方式添加、移除事件
// 绑定事件 可以进行监听
addEventListener()
// 移除事件
removeEventListener()
  1. 关于<input>标签中的webkitdirectory属性参考:https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLInputElement/webkitdirectory
  2. 使用FormData对象上传文件
const formData = new FormData()
formData.append('file', File)

七、FileReader()对象

  • FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。
  • FileReader实例拥有4个方法,3个用来读取文件,一个用来中断读取
    • abort 参数none 中断读取
    • readAsBinaryString 参数file 将文件读取为二进制码
    • readAsDataUrl 参数file 将文件读取为data:开头的字符串,实质就是Data URL 是将小文件(图像等)直接嵌入文档的方案,base64的方式由此来获得
    • readAsText file,[encoding] 文本方式读取文件,读取结果是文本的内容
  • 读取结果会存储在FileReader的result属性中,处理事件简介:
    • onabort 中断时触发
    • onerror 出错时触发
    • onload 读取成功时触发
    • onloadend 读取完成时触发 无论成功失败
    • onloadstart 读取开始时触发
    • onprogress 读取中
  • 文件开始读取后无论成功失败都会填充result属性,读取失败result属性会赋值null,否则会填充读取结果
  • onload读取成功之后,直接将base64赋值给img元素的src属性,就可以预览图片了
  • 使用FileReader对象将File转成base64代码案例
// 图片file转base64方法(file文件,回调函数)
  fileToBase64(file, callback) {
    // 创建FileReader对象(不兼容IE)
    let reader = new FileReader();
    // 将file转为base64 (异步操作)
    reader.readAsDataURL(file); 
    // 转换成功
    reader.onload = () => {
      const response = {
        status: true,
        data: reader.result
      }
      callback(response);
    };
    // 转换失败
    reader.onerror = function () {
      const response = {
        status: false,
        data: reader.error
      }
      callback(response);
    };
  }

// 调用方法
fileToBase64(imgFile, (res) => {
  if(res.status) {
    console.log('file转化成base64成功---',res.data)
  } else {
    console.log('file转化base64失败---',res.data)
  }
})

八、Exif库使用

  1. 用Exif获取图像的原始数据,例如:拍照方向,拍摄事件,ISO感光度,GPS地理位置等数据
  2. vue中引入exif-js
npm install exif-js --save   
  1. Exif提供的部分API方法
    • Exif.getData(img,callback) 获取图像数据
    • Exif.getTag(img,tag) 获取图像的某个数据
    • Exif.getAllTags(img) 获取图像的全部数据
    • Exif.pretty(img) 获取图像的全部数据,值以字符串的形式范围
  • 其中Exif中orientation不同的值代表不同的方向
  1. Exif的npm仓库地址:https://www.npmjs.com/package/exif-js
  2. Exif的GitHub地址:https://github.com/exif-js/exif-js
    上述两个地址里面有使用参考文档
  3. 前端开发工具箱:http://code.ciaoca.com/

九、Canvas画布

  1. canvas是一个容器(画布),他的getContext()方法用来获取一个对象,这个对象提供了在画布上绘图的方法和属性
  2. 菜鸟教程中关于canvas资料:https://www.runoob.com/tags/ref-canvas.html
  3. w3school中的canvas资料:https://www.w3school.com.cn/jsref/dom_obj_canvas.asp
  4. 资料网站:https://www.twle.cn/l/yufei/canvas/canvas-basic-index.html

十、动态创建标签并添加绑定事件

var input = document.createElement('input'); 
input.setAttribute('value', ''); 
input.setAttribute('type', 'text'); 
input.setAttribute('class', 'my-custom-input'); 

document.body.appendChild(input); 

//Change event listener 
input.addEventListener('change', function(e) { 
    console.log('I just changed'); 
}, false);

十一、utils方法

  1. 从base64代码中获取图片的宽高
var i = new Image();  //创建一个临时存储
i.onload = function(){  //定义加载图片后弹出显示
 alert( i.width+", "+i.height );
};
i.src = imageData //将图片数据赋值即可
  1. base64转文件
dataURLtoFile(dataurl) {
    var arr = dataurl.split(',')
    var bstr = atob(arr[1])
    var n = bstr.length
    var u8arr = new Uint8Array(n)
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n)
    }
    return new File([u8arr], 'image', {
      type: 'image'
    })
  }

十二、vue中图片预览

  1. 使用远程的<img>标签
  2. 使用element-ui的<el-image>标签
  3. 使用element-ui的<el-image-viewer>
<el-image-viewer v-if="imgViewerVisible" :on-close="closeImgViewer" :url-list="imgList" />
  1. 使用v-viewer库

十三、工具网站

  1. base64转图片:http://www.atoolbox.net/Tool.php?Id=1024
  2. vue图片裁剪插件(vue-picture-cut 2.x):https://gitee.com/light-year/vue-picture-cut

到了这里,关于Vue图片处理解决方案,一篇就够了的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3超详细的ref()用法,看这一篇就够了

    ref( ) 接受一个内部值,返回一个 ref 对象 ,这个对象是 响应式 的 、 可更改 的,且只有一个指向其内部值的属性 .value 。 ref() 将传入参数的值包装为一个带 .value 属性的 ref 对象。 举例: 查看打印结果: ref()方法允许创建可以使用 任何值类型的响应式 ref ref 的 .value 属性也

    2024年02月17日
    浏览(47)
  • Vue3基础看这一篇就够了(万字长篇,附实例代码及效果演示)

    目录 前言 概述 Vue3组合式api  VS  Vue2选项式api 基础部分 setup 选项式api的风格 组合式api的风格 区别  响应式数据 ref reactive shallowReactive 与 shallowRef   计算属性和监听  computed 函数  watch 函数  watchEffect 生命周期  响应式数据只读 toRaw 返回代理的源 markRaw 标记对象拒绝代理

    2024年03月24日
    浏览(52)
  • 接口测试,后端接口还没开发完,如何测?解决看这一篇就够了......

    在测试的时候经常会碰到后端开发工程师的接口还没有开发完成,但是测试任务已经分配过来。没有接口怎么测试呢? 测试人员可以通过 mock server 自己去造一个接口来访问。mock server 可用于模拟真实的接口。收到请求时,它会根据配置返回对应的请求。 Postman接口测试:

    2024年02月08日
    浏览(53)
  • 一篇就够:uniapp-Mqtt系列问题详细攻略(解决掉线、真机调试错误等问题)

    昨天搞了一天,我觉得新手可以参考我这篇文章思路,避免你和我一样踩坑,刚好去年的这几天也在搞mqtt,不过当时弄的是微信小程序,这次项目是uniapp,我想实现uniapp中的h5能够使用mqtt,转换成小程序后也能直接使用,后面成功了,但是也付出了点代价,接近弄了5个小时

    2024年02月05日
    浏览(40)
  • 短视频dy(某音)高版本最新最全4种抓包方案,第1种让你秒破QUIC协议,破解抓包难题,看我这一篇就够了!

    一般大多数网站、APP最常用的是http、https协议,而某两款最火的短视频dy(某音)、ks(某手)最新版使用的是quic协议(见附录1),导致fiddler和charles无法直接抓到包(某音app 13.5版本以下可以直接抓到包)。 网上有说用fiddler + xposed + justTrustMe能绕过某音的sslpinning,呵呵,别

    2024年02月01日
    浏览(48)
  • 计组一篇就够了

    1.2.1计算机工作过程 1.2.4计算机性能指标 机器字长、指令字长、存储字长的区别和联系是什么? 机器字长:计算机能直接处理的二进制数据的位数,机器字长一般等于内部寄存器的大小, 它决定了计算机的运算精度 。 指令字长:一个指令字中包含的二进制代码的位数。 存

    2024年02月01日
    浏览(39)
  • vue3+vite2动态绑定图片优雅解决方案

    优雅解决方案在最下面,小伙伴们儿可以直接前往 😊 在vue3+vite2项目中,我们有时候想要动态绑定资源,比如像下面的代码这样: 实际效果是这样: 我们注意到,控制台的报错信息 GET http://127.0.0.1:5173/1.jpg 404 (Not Found) GET :表示向服务器请求资源的方式。 http://127.0.0.1:5173

    2024年02月11日
    浏览(69)
  • Spark入门(一篇就够了)

    声明 : 本文为大数据肌肉猿公众号的《5W字总结Spark》的学习笔记,如有侵权请联系本人删除! Spark 知识图谱如下: Spark 是当今大数据领域最活跃、最热门、最高效的大数据通用计算平台之一 。 Hadoop 之父 Doug Cutting 指出:Use of MapReduce engine for Big Data projects will decline, repla

    2024年02月03日
    浏览(43)
  • 搞懂flyaway一篇就够了

    Flyway是一个用于数据库迁移的开源工具,它可以帮助开发人员轻松地管理数据库架构的变化。Flyway通过迁移来更新数据库,迁移可以使用特定于数据库的SQL语法或者用于高级数据库转换的Java编写。Flyway支持两种类型的迁移:有版本的迁移和可重复的迁移。有版本的迁移具有唯

    2024年02月03日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包