Question

我希望能够在环境中顺时针旋转AngularJS2,4,5中的图像，但我的所有发现都是用CSS完成的。但是应该保存旋转的图像，下次显示为默认值。

任何图书馆建议？

Answer 1

您可以使用<canvas>来完成此操作，该var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var angleInDegrees = 0; var image = document.createElement("img"); image.onload = function() { ctx.drawImage(image, canvas.width / 2 - image.width / 2, canvas.height / 2 - image.width / 2); } image.src = "https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded"; $scope.clockwise = function() { angleInDegrees += 90; drawRotated(angleInDegrees); } $scope.counterclockwise = function() { angleInDegrees -= 90; drawRotated(angleInDegrees); } function drawRotated(degrees) { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.save(); ctx.translate(canvas.width / 2, canvas.height / 2); ctx.rotate(degrees * Math.PI / 180); ctx.drawImage(image, -image.width / 2, -image.width / 2); ctx.restore(); } });使用 WebGL 。这是一个简单的例子，只需点击按钮即可将图像旋转90度。

＆＃13;

canvas {
  border: 1px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  <canvas id="canvas" width=300 height=300></canvas><br>
  <button ng-click="clockwise()">Rotate right</button>
  <button ng-click="counterclockwise()">Rotate left</button>
</div>

＆＃13;

canvas.toDataURL('image/png');

＆＃13;

要下载它，我认为您需要"/handleformsubmission?foo=bar"，它会返回一个可用于下载图片的链接

在没有CSS的情况下在AngularJS中旋转图像并保存它

1 个答案: