javascript - AngularJS write on an image with canvas - Stack Overflow

admin管理员组

文章数量:1328564

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!

• javascript
• html
• angularjs
• canvas

Share Improve this question Follow asked Oct 24, 2014 at 14:53 CarlosCarlos 7911 gold badge44 silver badges1616 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

Sorted by: 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