资讯专栏INFORMATION COLUMN

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

ccj659 / 1789人阅读

摘要:旋转图片并得到新的数据不合理的地方欢迎小伙伴雅正旋转图片度,并产生新的数据项目开发中,甲方希望上传图片的时候可以调整图片的方向,这也是一个合理要求,不合理又怎么样呢。

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

</>复制代码

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

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

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

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

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

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

src:图片链接,无论是url地址还是base64数据都可以

edg:旋转角度,注意必须是90°的倍数,否则代码报错,非90°的旋转的根据业务需要裁切裁切,用到的话小伙伴可以动动手修改一下函数

callback:因为img的load是个异步的,所以这才采取回调函数处理load成功的事件,回调的参数就是图片旋转后的base64的数据

</>复制代码

  1. function rotateBase64Img(src, edg, callback) {
  2. var canvas = document.createElement("canvas");
  3. var ctx = canvas.getContext("2d");
  4. var imgW;//图片宽度
  5. var imgH;//图片高度
  6. var size;//canvas初始大小
  7. if (edg % 90 != 0) {
  8. console.error("旋转角度必须是90的倍数!");
  9. throw "旋转角度必须是90的倍数!";
  10. }
  11. (edg < 0) && (edg = (edg % 360) + 360)
  12. const quadrant = (edg / 90) % 4; //旋转象限
  13. const cutCoor = {sx: 0, sy: 0, ex: 0, ey: 0}; //裁剪坐标
  14. var image = new Image();
  15. image.crossOrigin = "anonymous"
  16. image.src = src;
  17. image.onload = function () {
  18. imgW = image.width;
  19. imgH = image.height;
  20. size = imgW > imgH ? imgW : imgH;
  21. canvas.width = size * 2;
  22. canvas.height = size * 2;
  23. switch (quadrant) {
  24. case 0:
  25. cutCoor.sx = size;
  26. cutCoor.sy = size;
  27. cutCoor.ex = size + imgW;
  28. cutCoor.ey = size + imgH;
  29. break;
  30. case 1:
  31. cutCoor.sx = size - imgH;
  32. cutCoor.sy = size;
  33. cutCoor.ex = size;
  34. cutCoor.ey = size + imgW;
  35. break;
  36. case 2:
  37. cutCoor.sx = size - imgW;
  38. cutCoor.sy = size - imgH;
  39. cutCoor.ex = size;
  40. cutCoor.ey = size;
  41. break;
  42. case 3:
  43. cutCoor.sx = size;
  44. cutCoor.sy = size - imgW;
  45. cutCoor.ex = size + imgH;
  46. cutCoor.ey = size + imgW;
  47. break;
  48. }
  49. ctx.translate(size, size);
  50. ctx.rotate(edg * Math.PI / 180);
  51. ctx.drawImage(image, 0, 0);
  52. var imgData = ctx.getImageData(cutCoor.sx, cutCoor.sy, cutCoor.ex, cutCoor.ey);
  53. if (quadrant % 2 == 0) {
  54. canvas.width = imgW;
  55. canvas.height = imgH;
  56. } else {
  57. canvas.width = imgH;
  58. canvas.height = imgW;
  59. }
  60. ctx.putImageData(imgData, 0, 0);
  61. callback(canvas.toDataURL())
  62. };
  63. }

函数略大,不优雅,有什么不合理的地方欢迎小伙伴批评指正,共励共勉。
DOM源码链接https://github.com/sure2darli...
下载即用。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/94191.html

相关文章

  • JavaScript中的图片处理与合成(一)

    摘要:中的图片处理与合成一引言图片处理现在已经成为了我们生活中的刚需,想必大家也经常有这方面的需求。实际前端业务中,也经常会有很多的项目需要用到图片加工和处理。 JavaScript中的图片处理与合成(一) 引言: 图片处理现在已经成为了我们生活中的刚需,想必大家也经常有这方面的需求。实际前端业务中,也经常会有很多的项目需要用到图片加工和处理。由于过去一段时间公司的业务需求,让我在这方面积累...

    Charles 评论0 收藏0
  • html5 上传本地图片处理各种问题

    摘要:原文还是在简书上上传本地图片处理各种问题这是最近给公司写一个项目,项目要求大概是这样子上传手机本地图片,然后裁剪后加的需求能够旋转图片,用于裁剪后面加的需求填写各种文字,选择颜色,之后把文字和个相关的图片,水印到裁剪的图片上,上传服务器生成 原文还是在简书上: html5 上传本地图片处理各种问题 这是最近给公司写一个项目,项目要求大概是这样子:1.上传手机本地图片,然后裁剪(后加的需...

    iOS122 评论0 收藏0
  • html5 上传本地图片处理各种问题

    摘要:原文还是在简书上上传本地图片处理各种问题这是最近给公司写一个项目,项目要求大概是这样子上传手机本地图片,然后裁剪后加的需求能够旋转图片,用于裁剪后面加的需求填写各种文字,选择颜色,之后把文字和个相关的图片,水印到裁剪的图片上,上传服务器生成 原文还是在简书上: html5 上传本地图片处理各种问题 这是最近给公司写一个项目,项目要求大概是这样子:1.上传手机本地图片,然后裁剪(后加的需...

    Taste 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<