html5-canvas
इमेजिस

कैनवास का उपयोग करके छवि क्रॉप करना

यह उदाहरण एक साधारण छवि क्रॉपिंग फ़ंक्शन को दिखाता है जो एक छवि लेता है और क्रॉपिंग निर्देशांक और क्रॉप की गई छवि को लौटाता है।

function cropImage(image, croppingCoords) {
    var cc = croppingCoords;
    var workCan = document.createElement("canvas"); // create a canvas
    workCan.width = Math.floor(cc.width);  // set the canvas resolution to the cropped image size
    workCan.height = Math.floor(cc.height);
    var ctx = workCan.getContext("2d");    // get a 2D rendering interface
    ctx.drawImage(image, -Math.floor(cc.x), -Math.floor(cc.y)); // draw the image offset to place it correctly on the cropped region
    image.src = workCan.toDataURL();       // set the image source to the canvas as a data URL
    return image;
}

काम में लाना

var image = new Image();
image.src = "image URL"; // load the image
image.onload = function () {  // when loaded
    cropImage(
        this, {
        x : this.width / 4,     // crop keeping the center
        y : this.height / 4,
        width : this.width / 2,
        height : this.height / 2,
    });
    document.body.appendChild(this);  // Add the image to the DOM
};

टेड कैनवास

अपने डोमेन के बाहर या स्थानीय फ़ाइल सिस्टम से सामग्री जोड़ने पर कैनवास को दागी के रूप में चिह्नित किया जाता है। पिक्सेल डेटा तक पहुंचने का प्रयास करें, या डेटाURL में कनवर्ट करने से सुरक्षा त्रुटि होगी।

vr image = new Image();
image.src = "file://myLocalImage.png";
image.onload = function(){
    ctx.drawImage(this,0,0);
    ctx.getImageData(0,0,canvas.width,canvas.height);  // throws a security error
}

विस्तृत उदाहरण के साथ किसी को लुभाने के लिए यह एक उदाहरण मात्र है।

कैनवस पर छवि को प्रदर्शित नहीं कर रहा है "reference.drawImage"?

सुनिश्चित करें कि आपकी छवि ऑब्जेक्ट पूरी तरह से भरी हुई है इससे पहले कि आप इसे कैनवस पर context.drawImage साथ खींचने की कोशिश करें। context.drawImage । अन्यथा छवि चुपचाप प्रदर्शित करने में विफल रहेगी।

जावास्क्रिप्ट में, छवियों को तुरंत लोड नहीं किया जाता है। इसके बजाय, छवियों को अतुल्यकालिक रूप से लोड किया जाता है और जिस समय वे जावास्क्रिप्ट को लोड करने के लिए लेते हैं, वह किसी भी कोड को निष्पादित करना जारी रखता है जो image.src अनुसरण image.src । इसका मतलब यह है कि context.drawImage का उपयोग खाली छवि के साथ किया जा सकता है और इसलिए कुछ भी प्रदर्शित नहीं करेगा।

उदाहरण यह सुनिश्चित करने के लिए कि छवि को पूरी तरह से लोड किया गया है, इसे वापस लेने की कोशिश करें

var img=new Image();
img.onload=start;
img.onerror=function(){alert(img.src+' failed');} 
img.src="someImage.png";
function start(){
    // start() is called AFTER the image is fully loaded regardless 
    //     of start's position in the code
}

उदाहरण उनमें से किसी के साथ आकर्षित करने से पहले कई छवियों को लोड करना है

अधिक पूर्ण-कार्य छवि लोडर हैं, लेकिन यह उदाहरण दिखाता है कि यह कैसे करना है

// first image
var img1=new Image();
img1.onload=start;
img1.onerror=function(){alert(img1.src+' failed to load.');};
img1.src="imageOne.png";
// second image
var img2=new Image();
img2.onload=start;
img1.onerror=function(){alert(img2.src+' failed to load.');};
img2.src="imageTwo.png";
//
var imgCount=2;
// start is called every time an image loads
function start(){
    // countdown until all images are loaded
    if(--imgCount>0){return;}
    // All the images are now successfully loaded
    // context.drawImage will successfully draw each one
    context.drawImage(img1,0,0);
    context.drawImage(img2,50,0);
}

फिट या भरने के लिए स्केलिंग छवि।

फिट करने के लिए स्केलिंग

इसका मतलब है कि पूरी छवि दिखाई देगी लेकिन किनारों या ऊपर और नीचे कुछ खाली जगह हो सकती है अगर छवि कैनवास के समान पहलू नहीं है। उदाहरण फिट करने के लिए स्केल की गई छवि दिखाता है। पक्षों पर नीला इस तथ्य के कारण है कि छवि कैनवास के समान पहलू नहीं है।

भरने के लिए स्केलिंग

इसका मतलब है कि छवि को छोटा किया गया है ताकि सभी कैनवास पिक्सेल छवि द्वारा कवर हो जाएं। यदि छवि का पहलू कैनवास के समान नहीं है, तो छवि के कुछ हिस्सों को क्लिप किया जाएगा। उदाहरण छवि को भरने के लिए बढ़ाकर दिखाता है। ध्यान दें कि कैसे छवि के ऊपर और नीचे दिखाई नहीं दे रहे हैं।

उदाहरण के लिए स्केल फिट करने के लिए

var image = new Image();
image.src = "imgURL";
image.onload = function(){
    scaleToFit(this);
}

function scaleToFit(img){
    // get the scale
    var scale = Math.min(canvas.width / img.width, canvas.height / img.height);
    // get the top left position of the image
    var x = (canvas.width / 2) - (img.width / 2) * scale;
    var y = (canvas.height / 2) - (img.height / 2) * scale;
    ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
}

उदाहरण भरने के लिए स्केल

var image = new Image();
image.src = "imgURL";
image.onload = function(){
    scaleToFill(this);
}

function scaleToFill(img){
    // get the scale
    var scale = Math.max(canvas.width / img.width, canvas.height / img.height);
    // get the top left position of the image
    var x = (canvas.width / 2) - (img.width / 2) * scale;
    var y = (canvas.height / 2) - (img.height / 2) * scale;
    ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
}

दो कार्यों के बीच एकमात्र अंतर को पैमाना मिल रहा है। फिट मिनिंग फिटिंग स्केल का उपयोग करता है, भरण अधिकतम फिटिंग स्केल का उपयोग करता है।