Where to put rotate Canvas in this code

Question

Where to put rotate Canvas in this code

Navigation

#1 by (0 votes)

0

I searched a lot, but unfortunately I did not find where the rotate function of the canvas I could add in this code.

In html I have an input type ranger that I use to rotate the image .. The input type takes the value in degrees and saves it in a variable called degrees but I can not adapt this variable inside the ctx.rotate (20 * Math.PI / 180); and I also do not know where I would put this snippet inside the code below where it generates an image ...

  crop = function(){
    //Find the part of the image that is inside the crop box
    var crop_canvas,
        left = $('.overlay').offset().left- $container.offset().left,
        top =  $('.overlay').offset().top - $container.offset().top,
        width = $('.overlay').width(),
        height = $('.overlay').height();
		
		var TO_RADIANS = Math.PI/180; 
    crop_canvas = document.createElement('canvas');
    crop_canvas.width = width;
    crop_canvas.height = height;

    crop_canvas.getContext('2d').drawImage(image_target, left, top, width, height, 0, 0, width, height);
	
	var dataURL=crop_canvas.toDataURL("image/png");
	image_target.src=dataURL;
	orig_src.src=image_target.src;
	
	
	$(image_target).bind("load",function() {
		$(this).css({
			width:width,
			height:height
		}).unbind('load').parent().css({
			top:$('.overlay').offset().top- $('.crop-wrapper').offset().top,
			left:$('.overlay').offset().left- $('.crop-wrapper').offset().left
		})
	});
     
	sessionStorage.setItem('imgAtual', crop_canvas.toDataURL("image/png"));
	var url = $('#salvaEtapa').data('url');
	$.colorbox({iframe:true, href:url, width:"60%", height:"80%", opacity:"0.50", title:false});
	$("#escondido").css("visibility","hidden");
  }

html5 canvas

asked by anonymous 15.10.2016 / 05:06

1 answer

How to mount this ng-repeat? How do I make two references from one table into two tables?

score 0 · Answer 1

maybe like this:

crop_canvas = document.createElement('canvas');
crop_canvas.width = width;
crop_canvas.height = height;
crop_canvas.getContext('2d').rotate(grausAtual * Math.PI / 180);
crop_canvas.getContext('2d').drawImage(image_target, left, top, width, height, 0, 0, width, height);