Javascript函数将基础64图像旋转X度并返回新的base64

我想要一个javascript函数,它将base64图像旋转X度并返回新的base64图像。

示例我希望用以下内容调用函数:

var newImg = rotateImg(imageData,90); //应返回旋转90度的原始图像的base64字符串。

(底部示例base64图像字符串)

理想情况下,该function将向后兼容非html5浏览器,但为了简单起见,欢迎使用纯canvas解决方案。

我已经和它斗争了好几天。

我理解解决方案可能是,用原始字符串加载图像对象,创建临时canvas对象和上下文,然后旋转上下文,然后将canvas转换回图像字符串,但只是可以让它工作….请帮助!

示例图像字符串:

数据:图像/ PNG; BASE64,iVBORw0KGgoAAAANSUhEUgAAACIAAABBCAMAAACD + YYEAAAABGdBTUEAALGPC / xhBQAAAwBQTFRFpI8jl5FIn5V0paijNzAfJiIavsHNlpabcnB6iH0XZ2Z4gH6BnJM2paSHu7NVoqGdoi8pRDwnnz40vrl4qJtgpqKNg3pRoJBL8 + UJPj08nJeCNCkQhWgG5erh0q2RxcnKyYcT8POb391VRTAE + / rqzsqsqZ8xsaBa38sVgXU0jI6SpKKUdlpLk4VEfXAcjId2UFBMo5tc5bwCdX6noJtzwLIkkYAvmI5fu61GfnlMjn4Y39gPeXJVlY99gYKNb19afnli186St58T0cUPV09Azb8fX1w / nJqdp5s3dGtHMzhLGRcex8Fk4tZspoYSdnNxpKBxko51tKRg5d6Ig4B1181vX2BgFxEQWFE8W1dDiYuVdG5l5NQyraqZa2lmamppY15AgH5shYN8d3NocG1feXhyAAAA15Bry6847fPEPEWJv0E28 + ZTw76K / txB3cpM3NvAkpKecVsJjouKXGKJ9 + Io7ezNnqGts69tf3pT9vOt / vYY9d46 / uwVHx0mZm6hv6AmmZJh8uWS5t6jYWd78e2RVEQQ7 + qzCQ9JsrCY7dlNVVVapZIq / PMw1rkI7eVzxrgM7u4Ih24lg30UYl0krp5HnpqI0sdhzKEM3tWEj4tp7uiE69dY3MEKxsB6 // 2zz8JRKjBW / fdZXlpFua0O / TSM / 9IB / + 5oLB0B / O0D // 7cxq8h8t4DSk9sBgII7NkL // //指数mQ lH4MMlPzgm / VCQ / ODH / vJ4lY4XNjIu1c99IiM0 // ZI / uAMVlpuenp1 // // 5wvbFJISRE yE9dQFTkk6REA3NjU5s5oimY5J / + + Ag0bAF // dwCqpwN7s8FWVlX + yaEhE2FhQpMysgQEVamH8V OCC // yoU1NS18Ay / VQ7 / + 2aEw4d / + YP / + uGdHqZamxwHhkZ5c 4E / + E5DAshBAMY / + AV / + NPSkpMGRcf / + H9 / + VM / + AT / 9YBLSss / + DY / + ZaLy0y / vQCJyUn / + JFAwMlOjk5QEBG / + UAKCUg / FSA / + 0BJCEgIh4e / + AB /器90A / 9wA1H7CggAAAGd0Uk5T4vLQweDsx83XzcXoyNrZx / LL4NeTbrKm / vHL8f38 / VH9 / VV7 / v3Vs / 2JmryxXKtd5cn8 / P7V + YLKb / v9gmv + NPV + / vpj5ktDs / 398 / J + / K + 8mf7 + EF7 + / rQhLir9FTMVij8iCQ8DAMXyiFIAAAZySURBVEjHhdYHUBNZGABg5 + 68fmdX7AVRKYeKgAIK0osUaSIQKSmevfcCWCgCgkqvgiC9SS / SqxRpoWNIDCVIkUAKCSn3djcLnufM / TOb2cl88 // v7fv3vV108n9j0cItHou1dQRhY2ODxX2D4KxtLUyPwiEtLS1lYWKN + 4rgdCT1 / jSMigqytCwoUFeX2PyjlA7 + XwSvJauNwWRmYjzDfX3DzM1D3Ldv / EKL / wXB6cjIR2GaKOn3zn0adb1zx / 1RyKNLm3 / Wsp8nBDu1fTfNIppS7ufET37o7SxK2n5D3SyQ9KsJDiVYi98uy7tQOrhDM58nR / t7s3uAiXxwVVUKKyI4k9 / LopIjGtj812PDnyY / wCbpUeR5iT92E0RESft5uk8TXyh4 / S4nPhci2UVJ7pbmPeqmeIRgD6twKPVNbC6Xc / dNaWlFRnPny54id0vLzq1HbRFiqyfWUe / TwaFzOM8x27YZ + Zpv7QQopCyseYUJASaOO8QoPimc588a / FZ8 / f2rYvRDbxW4doZFGVUYKuEhQvhLgd / U1KHi5zZLYwxCQW1lxjwIyQ0Pz7XcLyLaiYKGZ1d4DAaD1kft63MqLCwsby8x9Lz3ymg / Di4ECKXRjcpgtPJmQUxPMKtZrPbiErPup9tWooStkdXSSiPPzc7x5gCpYY68P / aYpBpwHSPK4qjAJ7Z4TLXxeHM8cE1PTDFZXccG9u 17kK6phBNNutK43IOZTybz5kDAZOQ9IAEUBR1k0jZr5IKrylnMaTIZJtMIIV0 + JadnBz06AnbVAbl6 / WjWSA0PToMWcg7sllOwwBJOLsIr7dCsD37R3t41MgEGOzc7kQ + GCwgp0CX42Q4le0C0flFWNlb0an / vVUOzooFwmoJmNECSN96guEPSGhSy1nFYtkGxODU11WAwLQ1 + uoVTrJFikhlRXG23HR5uBt1lV + qunUkt7spvy8 + qrqqqrmYxWakksw3rtfDIjE7q / uDmHVpSF1BWVmZoCN6AyPNPAkNVLwdcWW9xQtSYqxYnaGBUVO4 + ffOqtKKiGWqXntMbL5W5kQ + LCM4CEDqHfh + QeNB1SEttTwoSt0IJ / uARq0YOnT80dmH486fJ0Q / 9 / b292UVFF8XT1LALxJhOF7weuzADEcQUvewWTzuOEocjfcZcLmjujzPD86an + VRC2nHbBUJM5AqFQ2OIAbU + 9PZk1CYMogTncIRK7OAKBHzUjI6O9ndW1CZQF8hsH5ELkbdIKThPcy5ErBFi7zAHCF0oEKJpIJNR6tJGQ7NARLmBCwg6nM + gWMar5Kzp43YEdLitLyrZQoEAyvNubGZmGGTKfaORNXHcDs0y3QIIHwghH4wHJAKZ4nNq88sXCi1uedHEhgvxEQNVu1dbbSAjGu6Jg8xCIlIIVm + HoEQ51zWqDOYXwGJtjbeQLUACLjY0NDZ2PzmGdVhEcIfWMmv5CwQpN8TdpT + CEsKhPdW148JxwRdIyG9g77rtZYq21O49VS5x4yDAz7xraNC8fewLEpPMZwvH4 + LGYSkYjxOw2Q3dofMEFNLP5HPpXC642Hw29MtOZDdg5AcWuk6 / LRO + UTPxOQcEHbo6xHYlZ3pG1q2ebynFskziVLVfXl5eY + yz2NjGvDzFuhIzo4JaWdEC4CWJ3UPKHh7lLVTabFtb28RUeXT7NedAc6NkWfTprtGgcL2jo1ktYCtjUKmMlvLo4sekJw / DY / VEa2SzM7iS6w3e + ywymeYE3vspVtdAieqTh571ejYoqa / 8WNee2jVBhja7aeith0lOxAFdpF + WO + Veh8sXF3fxrOD9ZaoG2l5IN9VzKlFiv7KJf / Gq80CVaJdCdiDSzcic6 / NEche3W9X5Wr4VGd5UQZaR949JVw1fndsrmjTuoCYnoo50piWtzwnZyGoM2h + XPAgq9V1thy6ANicxIkC / dZABz7q1tdDAK / RWUFizuam9aBl1D1A6Uij1RP + sNh6N2teaH3P7lqW5a / bDFYdwInJiv / GWYB9KOkUztrExT7nOzNIobKv5pr / NTG0I6Alro7b07BaV9BR4CZ ++ AafWndObzi6VWTg + oSN2 + ZYUMUp6SiIdHGwVro9ubNy0XMYE / 8VRTsBqySpgukFgLhqFqEtIXNosbWGH + / qbQWf / zr0gvlu3bt2SJd9LOdoT / vvlYW8HfXeYOMKBJXzr4 + Qk的/ C + BMH8rin8A / Bof4kY + PtwAAAAASUVORK5CIIA =

这是代码

        

我上面的一些通用方法转换base64Image字符串顺时针或逆时针没有任何依赖

  /** * Rotates base64 image string iether * clockwise or counterclockwise * * @param isClockwise - true or false * * WARNING!!! Method not null save - assumes all input data are valid */ function rotateBase64Image90deg(base64Image, isClockwise) { // create an off-screen canvas var offScreenCanvas = document.createElement('canvas'); offScreenCanvasCtx = offScreenCanvas.getContext('2d'); // cteate Image var img = new Image(); img.src = base64Image; // set its dimension to rotated size offScreenCanvas.height = img.width; offScreenCanvas.width = img.height; // rotate and draw source image into the off-screen canvas: if (isClockwise) { offScreenCanvasCtx.rotate(90 * Math.PI / 180); offScreenCanvasCtx.translate(0, -offScreenCanvas.width); } else { offScreenCanvasCtx.rotate(-90 * Math.PI / 180); offScreenCanvasCtx.translate(-offScreenCanvas.height, 0); } offScreenCanvasCtx.drawImage(img, 0, 0); // encode image to data-uri with base64 return offScreenCanvas.toDataURL("image/jpeg", 100); }