javaScript旋转Base64图片并得到新的base64数据

最新推荐文章于 2024-03-15 14:40:55 发布
最新推荐文章于 2024-03-15 14:40:55 发布
阅读量1.4k 收藏 5
点赞数 1
文章标签： javascript 前端 ViewUI
原文链接：https://segmentfault.com/a/1190000014352583
版权
本文介绍如何在JavaScript中旋转Base64编码的图片并获取旋转后的新Base64数据。通过使用canvas进行图片旋转，并利用toDataURL()生成新数据。文章提供了一个旋转函数，接受图片链接、旋转角度（90度倍数）和回调函数作为参数，返回旋转后的Base64数据。
摘要由CSDN通过智能技术生成

javaScript旋转Base64图片并得到新的base64数据

不合理的地方欢迎小伙伴雅正

js旋转base64图片90*N度，并产生新的base64数据

项目开发中，甲方希望上传图片的时候可以调整图片的方向，这也是一个合理要求，不合理又怎么样呢。

时间紧迫，我立刻阅览资料，寄希望与现成的插件，网上的思路是有了，就是利用canvas做图片旋转，然后用todataURL()函数生产base64数据，思路是对的，就是函数都不好用，然后自己决定做一个吧。

DOM样例，点击下面的旋转按钮就能生成宣传后的base64数据

clipboard.png

具体函数的代码就贴在下面了，三个参数

  1. src:图片链接，无论是url地址还是base64数据都可以
  2. edg:旋转角度，注意必须是90°的倍数，否则代码报错，非90°的旋转的根据业务需要裁切裁切，用到的话小伙伴可以动动手修改一下函数
  3. callback:因为img的load是个异步的，所以这才采取回调函数处理load成功的事件，回调的参数就是图片旋转后的base64的数据
    function rotateBase64Img(src, ed
最低0.47元/天 解锁文章
weixin_33850890
关注
java -- cropper裁剪图片并base64上传 移动端简单示例
qq_15988615的专栏
11-15 5030
前言 cropper是一款使用简单且功能强大的图片剪裁jQuery插件。该图片剪裁插件支持图片放大缩小，支持图片旋转，支持触摸屏设备，支持canvas，并且支持跨浏览器使用。 cropper有两种方式上传截取的图片数据，一种是前端把裁剪的数据传到后台进行裁剪后保存，第二种是前端拿到剪裁后的数据，转成base64后上传， 后台通过二进制流上传图片信息。这里采用的是第二种方法。
JS前端上传图片压缩并且处理旋转问题生成base64数据
08-10
JS前端上传图片、压缩、并且处理旋转问题，生成base64数据
H5技术完美实现调用手机摄像头、相册。图片上传base64，图片压缩、预览、删除以及图片旋转90度的处理--demo。
热门推荐
China_Guanq的博客
08-16 1万+
看了帖子上有很多关于H5调用手机摄像头、相册的例子，也有很多可靠的栗子，综合技术点针对HTML5调用用手机相机、相册的的一次代码整合。实现提供完成的Demo提供给大家，可直接应用于项目中需要图片上传的功能。因为是H5直接调用，并没有用到像Cordova或者HTML5Plus的 JavaScript库去调用手机硬件，因此在低端手机可能会调用不到摄像图、或者相册，因此这也是在H5在这里的不足，不好解决。
Javascript函数将base 64图像旋转X度，并返回新的base64(Javascript function to Rotate a base 64 image by X degrees an...
阿星小栈
02-08 769

   <html> <head> </head> <body> <canvas id="c"/> </body> <script> function rotateBase64Image(base64data, callback) { var c
js base64图片旋转90度
苏雨丶
12-27 1万+
<html> <head> <style type="text/css"> body, button { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } </style> </head&am
js实现base64图片旋转方向
搬砖的石头
10-17 2970
js实现base64图片旋转方向
js使用base64 上传图片解决iOS手机竖屏拍摄图片发生旋转问题
weixin_33910137的博客
12-14 779
###iOS上拍摄/储存的图片会附带属性orientation（方向角）。这个属性会影响图片的显示方向。可以通过插件 exif.js 获取此属性。 使用插件 mobileBUGFix 调整方向角。 ###新建js upload.js $.fn.UploadImg = function(o) { this.change(function() { var file = ...
js实现图片转base64
qq_41640103的博客
04-10 1773
是不是有人和我一样在业务中遇到图片转base64的问题，在网上找了很多都不行，这个配合上传组件复制可用，直接上代码！ changeImageIsBase64(image) { let that = this; let imageFile = image.file; let isJpg = false; // 判断图片类型 if (imageF
图片压缩、旋转、base64转换
12-29
本篇将重点讲解"图片压缩、旋转、base64转换"这一主题，这些功能在移动应用、网页开发以及数据传输中有着广泛的应用。 首先，我们来看图片压缩。图片压缩是为了减少文件大小，以便于存储和快速传输。常见的图片压缩...
iOS相机图片处理：上传压缩转Base64至阿里云，自动旋转矫正
3. 使用FileReader读取图片并转换为Base64：当文件上传后，通过`FileReader`读取图片内容，并在`onload`事件中将图片转为Base64格式。 ```javascript reader.readAsDataURL(file); reader.onload = function() { ...
base64图片压缩生成另外一个base64
qq_43077857的博客
03-24 361
// 压缩图片 BASE64Decoder decode = new BASE64Decoder(); byte[] zmImguploadImgde = null; try { zmImguploadImgde = decode.decodeBuffer(retImg); } catch (IOException e) { e.printStackTrace(); } Long maxSize = 30 * 1024L; zmImguploadImgde = ImgTools.compressUnderS
js base64顺时针旋转90度得到新的base64
weixin_42790369的博客
02-27 1380
js base64顺时针旋转90度得到新的base64
H5-IOS 图片转90度 canvas 获取base64问题解决
weixin_33872660的博客
09-18 678
故事背景： 在移动端需要上传图片，图片显示在页面上，然后压缩图片，将图片转为base64，传给接口，用于进行人脸识别。 上传图片以后发现，IOS上传的图片会逆时针旋转90度，导致生成的base64与原先图片有差异，这会影响人脸识别结果。 解决方法： 引入EXIF.js, 可自行查看官网https://www.npmjs.com/package/exif-js 方式一：通过cnd引入； ...
将base64图片旋转90度，将图片格式化（保持透明背景）
qq_44866462的博客
06-21 2712
js将图片旋转90度 function rotateBase64Img(src, edg) { var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); var imgW;//图片宽度 var imgH;//图片高度 v
file上传图片，base64转换、压缩图片、预览图片、将图片旋转到正确的角度
qq_39670012的博客
09-01 448
/** * 将base64转换为文件对象 * （即用文件上传输入框上传文件得到的对象） * @param {String} base64 base64字符串 */ function convertBase64UrlToBlob(base64){ var base64Arr = base64.split(','); if(base64Arr.length > 1){ //如果是图片base64，去掉头信息 base64 = base64Arr[1]
移动端手签-图片base64旋转功能
懒鬼不能懒的博客
12-29 765
记录一个方法用于移动端横屏画布的旋转图片功能。
(转)jquery的base64
一个今天胜过两个明天
10-19 1147
https://github.com/yckart/jquery.base64.js var a="123"; var b=$.base64.btoa(a); console.log(a===$.base64.atob(b))
base64图片旋转后得到一个base64图片
最新发布
weixin_67254784的博客
03-15 990
3.将 base64的图片 转换为 file 对象 ============================================================================
canvas横屏签名，签名图片旋转90度生成base64
起风了
11-09 4499
效果展示 html横屏展示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/> <title>签字</title> &lt
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值