Работа с изображением

[assan]

есть код, который ресайзит картинку, поворачивает
на экране картинка выглядит качественно.
но ..полученная после преобразования в canvas картинка имеет паршивое качество.
как сделать преобразования картинки в webgl?
как сделать скриншот части картинки с экрана?
другие варианты?

[DjDiablo]

Дублируете.
Покажите проблему лицом. Нужен запускаемый скрипт с вашими трансформациями, возможно проблема в вашем скрипте а не в канвас.

[assan]

код
картинка масштабируется, поворачивается, позиционируется таким образом чтоб нужный её фрагмент был вписан в рамку (70px*70px)

canvas = document.createElement("canvas");
                var context = canvas.getContext("2d");

                var pic = new Image();
                pic.src = $('#img').attr('src');
                var sq = Math.sqrt(crop.width * crop.width + crop.height * crop.height);
                var k = crop.width / crop.height;
                var wc, hc;
                if (k >= 1) {
                    wc = sq;
                    hc = sq / k;
                } else {
                    wc = sq;
                    hc = sq / k;
                }

                var x = new_img.x * pic.width / new_img.width - wc / 2 / img.scale;
                var y = new_img.y * pic.height / new_img.height - hc / 2 / img.scale;
                var w = wc / img.scale;
                var h = hc / img.scale;

                canvas.height = hc;
                canvas.width = wc;
                context.fillStyle = '#ffffff';
                context.fillRect(0, 0, wc, hc);
                context.drawImage(pic, x, y, w, h, 0, 0, wc, hc);
                pic.src = canvas.toDataURL("image/jpeg", 1);
                context.translate(wc / 2, hc / 2);
                context.rotate((img.rotate * Math.PI) / 180);
                context.drawImage(pic, -wc / 2, -hc / 2);
                pic.src = canvas.toDataURL("image/jpeg", 1);
                canvas.height = crop.height;
                canvas.width = crop.width;
                x = (wc - crop.width) / 2;
                y = (hc - crop.height) / 2;

                context.drawImage(pic, x, y, crop.width, crop.height, 0, 0, crop.width, crop.height);
                document.querySelector('.cropped').innerHTML += '<div ><img id="' + crop.id + '" src="' + canvas.toDataURL("image/jpeg", 1) + '"></div>';

картинки с рамкой - скриншоты с экрана, то как выглядит картинка после позиционирования
без рамки - после обрезки canvas
PS
кроссбраузерность не нужна, хром, мозилла(показан результат в хроме)
PSPS
а в мозиле данный код не работает...
для желающих проверить - могу выслать весь код странички.

[DjDiablo]

Если ты берёшь растр из маленького канваса, да ещё в 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]

Лови второй пример с тремя последовательными увеличениями без обращения к данным в канвасе.
Координаты crop в zoom указываются в процентах тобишь от 0(0%) до 1 (100%).

<b>три зума, каждый последующий увеличивает картинку из предыдущего</b></br>
<canvas id="myCanvas" width="250" height="250"></canvas>
<canvas id="myCanvas2" width="250" height="250"></canvas>
<canvas id="myCanvas3" width="250" height="250"></canvas>

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

<script>
     function zoom(imageObj,ctx,x,y,width,height,opt){
         opt=opt||{};
         var w=opt.w||imageObj.width;
         var h=opt.h||imageObj.height;
         var offsetX=opt.x||0;
         var offsetY=opt.y||0;

	     ctx.drawImage(imageObj, (x*w)+offsetX, (y*h)+offsetY, width*w,height*h, 0,0,ctx.canvas.width,ctx.canvas.height); 
         ctx.setTransform(1, 0, 0, 1, 0, 0);

         return {
            w:w*width,
            h:h*height,
            x:(x*w)+offsetX,
            y:(y*h)+offsetY
         }
      }


      function drawImage(imageObj) {
        //zoom 1
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var zoomResult=zoom(imageObj, context, 0.2,0.2, 0.5,0.5);
 
        //zoom 2
        var canvas2 = document.getElementById('myCanvas2'); 
        var context2 = canvas2.getContext('2d');
        var zoomResult2=zoom(imageObj, context2,  0.3, 0.33, 0.4,0.4, zoomResult);

 
        //zoom 3
        var canvas3 = document.getElementById('myCanvas3'); 
        var context3 = canvas3.getContext('2d');
        var zoomResult3=zoom(imageObj, context3,  0.1, 0.08, 0.4, 0.4, zoomResult2);
      }

      document.getElementById('test').onload=function(){
           drawImage(this);
      }
</script>