1

Procurei muito, mais infelizmente não encontrei onde a função rotate do canvas eu conseguiria adicionar neste código.

No html tenho um input type ranger que utilizo para girar a imagem.. O input type pego o valor em graus e salva em uma variavel chamada grausAtual mais não consigo adaptar esta variavel dentro do ctx.rotate(20 * Math.PI / 180); e muito também não sei onde eu colocaria este trecho dentro do código abaixo onde gera uma imagem...

  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");
  }

1 Resposta 1

0

talvez assim:

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);

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .