एचटीएमएल 5 कैनवास .. putImageData पैमाने

Question

कैसे पैमाने (1.5, 1.5) काम नहीं कर के साथ putImageData पैमाने को बदलने के लिए बदलने के तरीके

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

Answer 1

सही है, अपने कोड मौजूदा चित्र स्केल नहीं करेगा।

context.scale केवल नया चित्र, नहीं मौजूदा चित्र को प्रभावित करता है।

context.putImageData सहेजे गए मूल पिक्सल को कैनवास पर वापस रखेगा, लेकिन इमेजडेटा ड्रॉइंग कमांड नहीं है, इसलिए इसके परिणाम स्केल नहीं किए जाएंगे।

मौजूदा पिक्सल को स्केल करने के लिए आपको पिक्सल को अपने कैनवास के बाहर किसी इकाई में सहेजना होगा। बाहरी इकाई एक नया छवि तत्व या दूसरा कैनवास तत्व हो सकता है।

उदाहरण कोड और एक डेमो: 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 & 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();