Показать сообщение отдельно
  #4 (permalink)  
Старый 11.01.2015, 13:31
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

Если ты берёшь растр из маленького канваса, да ещё в Jpeg то результат и вправду будет лажовый.
Давай попробуем обойтись без того чтобы забирать данные из канвас, вместо этого источником данных всегда будет оригинальное изображение.

Берём морду кота вырезаем crop И масштабируем вырезанный результат на весь доступный канвас с поворотом на 90градусов, обрати внимание что в качестве мы не теряем

<b>Зум в канвас. В большой и в маленький</b></br>
<canvas id="myCanvas" width="500" height="500"></canvas>
<canvas id="myCanvas2" width="70" height="70"></canvas>

<br/> <b>original</b><br/>
<img id="test"  src="http://rsm.haber365.com/N/1296202473_22_kedicik-22.jpg">

<script>
     function zoomAndRotate(imageObj,ctx,x,y,width,height){
          ctx.rotate(90 * Math.PI / 180);
          ctx.translate(0,-ctx.canvas.width);

	      ctx.drawImage(imageObj, x, y, width,height,0,0,ctx.canvas.width,ctx.canvas.height); 
          ctx.setTransform(1, 0, 0, 1, 0, 0);
          //return ctx.getImageData(0, 0, width, height);	
      }

      function drawImage(imageObj) {
        //example 1
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var zoomResult=zoomAndRotate(imageObj, context, 160,140,260,250);
 
        //example 2
        var canvas2 = document.getElementById('myCanvas2');
        var context2 = canvas2.getContext('2d');
        var zoomResult2=zoomAndRotate(imageObj, context2, 160,140,260,250);

      }
      document.getElementById('test').onload=function(){
           drawImage(this);
      }

</script>


Если нужно вырезать часть из вырезанной картинки то нужно вновь брать растр из оригинальной картинки но не в коем случае не из канваса в который масштабировал иначе будет ужасный результат
__________________
Лучше калымить в гандурасе чем гандурасить на колыме

Последний раз редактировалось DjDiablo, 11.01.2015 в 15:34.
Ответить с цитированием