admin管理员组

文章数量:1328351

I have an image in my html that I get with an id:

<img id={{idImage}} ng-src="http://localhost:3000/images/{{idImage}}"/>

I have in one of my scope some coordinate (x, y, w, h).

In my controller:

$scope.coordinate;

But I don't know how to draw with canvas on the image according to the coordinates.

Thanks for your help!

I have an image in my html that I get with an id:

<img id={{idImage}} ng-src="http://localhost:3000/images/{{idImage}}"/>

I have in one of my scope some coordinate (x, y, w, h).

In my controller:

$scope.coordinate;

But I don't know how to draw with canvas on the image according to the coordinates.

Thanks for your help!

Share Improve this question asked Oct 24, 2014 at 14:53 CarlosCarlos 791 gold badge4 silver badges16 bronze badges 3
  • could you use .svg ? have you tried anything so far ? Are you open to using other libs like d3 ? – Pogrindis Commented Oct 24, 2014 at 14:57
  • I have a .html (because I have other info to display on the page). I would prefer using Canvas but don't know libs d3. – Carlos Commented Oct 24, 2014 at 14:58
  • Have you tried to learn how to use canvas before posting this question? If you have: do you have a concrete question about how to draw in canvas? If you haven't: please delete the question and ask again after you have tried something. – Josep Commented Oct 24, 2014 at 15:02
Add a ment  | 

1 Answer 1

Reset to default 5

Something like the following simple example.

var drawingCanvas = document.getElementById($scope.idImage);
var context = drawingCanvas.getContext('2d');

$scrope.draw = function() {
context.drawImage($scope.idImage, $scope.coordinate.x, $scope.coordinate.y, $scope.coordinate.w, $scope.coordinate.h);
}

Fiddle JS Example #1 Fiddle JS Example #2

There is nothing special about the draw in canvas just because you're using angular.

Some excellent examples here : Draw HTML5 Canvas

本文标签: javascriptAngularJS write on an image with canvasStack Overflow