Масштабирование холста HTML5 с использованием getImageData и putImageData

Есть ли способ масштабировать холст с помощью getImageData и putImageData. Ниже приведен фрагмент кода.



     var c=document.getElementById("myCanvas");
        var c2=document.getElementById("myCanvas2");
        var ctx=c.getContext("2d");
        var ctx2=c2.getContext("2d");
        ctx.fillStyle="red";
        ctx.fillRect(10,10,50,50);

        function copy(){
         var imgData=ctx.getImageData(10,10,50,50);
         ctx2.translate(133.333,0);
         ctx2.scale(0.75,1);
         ctx2.putImageData(imgData,10,70);
        }

Я пробовал это http://jsbin.com/efixur/1/edit.

Спасибо Аджайн


html html5-canvas getimagedata putimagedata
person Ajain Vivek    schedule 23.10.2012    source источник

Ответы (1)


arrow_upward
6
arrow_downward

getImageData () и putImageData () предоставляются для операций с необработанными пикселями, поэтому масштабирование невозможно (если вы не написали настраиваемый масштабатор в Javascript).

Вы хотите использовать drawImage(), а затем использовать другой <canvas> в качестве источника вместо <img>.

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images#Scaling.

person Mikko Ohtamaa    schedule 26.10.2012