Блог

Как изменить putImageData масштаб scale(1.5, 1.5) , если он не работает..

 var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
context.clearRect(0, 0, canvas.width, canvas.height);
context.scale(1.5, 1.5);
context.putImageData(imageData, 0, 0);
  

Правильно, ваш код не будет масштабировать существующие чертежи.

context.scale влияет только на новые чертежи, а не на существующие чертежи.

context.putImageData сохраненные исходные пиксели будут помещены обратно на холст, но putImageData не является командой рисования, поэтому ее результаты не будут масштабироваться.

Чтобы масштабировать существующие пиксели, вы должны сохранить пиксели в объект за пределами вашего холста. Внешний объект может быть новым элементом изображения или вторым элементом Canvas.

Пример кода и демонстрация: http://jsfiddle.net/m1erickson/p5nEE /

 // canvas related variables
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");

// draw a test square
context.fillStyle="red";
context.fillRect(0,0,50,50);

// create an image from the canvas
// clear amp; scale the canvas
// draw the image to the canvas
var imageObject=new Image();
imageObject.onload=function(){

    context.clearRect(0,0,canvas.width,canvas.height);
    context.scale(1.2,1.2);
    context.drawImage(imageObject,0,0);
  
}
imageObject.src=canvas.toDataURL();