कुछ चौड़ाई और ऊंचाई के साथ क्रॉप कैनवास/निर्यात एचटीएमएल 5 कैनवास

Question

सैकड़ों ट्यूटोरियल हैं, कैनवास पर drawImage() द्वारा कोई छवि कैसे फसल कर सकती है।

context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight); 

हालांकि, मेरे पास एक कैनवास है जो उपयोगकर्ता के ब्राउज़र को भरता है। एक छवि के रूप में कैनवास निर्यात करके मैं केवल 640px * 480px का क्षेत्रफल (0 | 0) से निर्यात करना चाहता हूं।

समस्या: मैं toDataURL() के लिए केवल 640 * 480 कैनवास का उपयोग करने के लिए जावास्क्रिप्ट कैसे बता सकता हूं?

$("#submitGraphic").click(function(){ 
    var canvas = document.getElementsByTagName("canvas"); 
    // canvas context 
    var context = canvas[0].getContext("2d"); 
    // get the current ImageData for the canvas 
    var data = context.getImageData(0, 0, canvas[0].width, canvas[0].height); 
    // store the current globalCompositeOperation 
    var compositeOperation = context.globalCompositeOperation; 
    // set to draw behind current content 
    context.globalCompositeOperation = "destination-over"; 
    //set background color 
    context.fillStyle = "#FFFFFF"; 
    // draw background/rectangle on entire canvas 
    context.fillRect(0,0,canvas[0].width,canvas[0].height); 

    // not working, seems to clear the canvas? browser hangs? 
    // seems that I can click a white image in the background 
    /*canvas[0].width = 640; 
    canvas[0].height = 480;*/ 

    // not working either 
    /*canvas[0].style.width = '640px'; 
    canvas[0].style.height = '480px';*/ 

    // not working at all 
    /*context.canvas.width = 640; 
    context.canvas.height = 480;*/ 

    // write on screen 
    var img = canvas[0].toDataURL("image/png"); 
    document.write('<a href="'+img+'"><img src="'+img+'"/></a>'); 
}) 

पुनश्च::

यहाँ मैं अब तक किया है मैं आकार बदलने या पैमाने, बस कतरन/तय खिड़की को फसल के लिए नहीं करना चाहती। Here मैंने पढ़ा है कि आप केवल canvas.width और canvas.height निर्दिष्ट करते हैं - लेकिन यह कैनवास को साफ़ करता है।

Answer 1

सबसे अच्छा तरीका केवल मौजूदा कैनवास से आकर्षित करने के लिए एक अस्थायी कैनवास बनाना है। उपयोगकर्ता इस अस्थायी कैनवास को कभी नहीं देख पाएगा। फिर आपको अस्थायी कैनवास पर toDataUrl() का उपयोग करने की आवश्यकता है।

Live Demo

$("#submitGraphic").click(function(){ 
    var canvas = document.getElementsByTagName("canvas"); 
    // canvas context 
    var context = canvas[0].getContext("2d"); 
    // get the current ImageData for the canvas 
    var data = context.getImageData(0, 0, canvas[0].width, canvas[0].height); 
    // store the current globalCompositeOperation 
    var compositeOperation = context.globalCompositeOperation; 
    // set to draw behind current content 
    context.globalCompositeOperation = "destination-over"; 
    //set background color 
    context.fillStyle = "#FFFFFF"; 
    // draw background/rectangle on entire canvas 
    context.fillRect(0,0,canvas[0].width,canvas[0].height); 

    var tempCanvas = document.createElement("canvas"), 
     tCtx = tempCanvas.getContext("2d"); 

    tempCanvas.width = 640; 
    tempCanvas.height = 480; 

    tCtx.drawImage(canvas[0],0,0); 

    // write on screen 
    var img = tempCanvas.toDataURL("image/png"); 
    document.write('<a href="'+img+'"><img src="'+img+'"/></a>'); 
})​ 

Answer 2

आप दूसरी ऑफ-स्क्रीन कैनवास बनाते हैं, तो आप छवि को पहले कैनवास से दूसरे में कॉपी करते हैं (अपनी छवि ऑब्जेक्ट के रूप में पहली बार उपयोग करते हुए), फिर आप दूसरे कैनवास निर्यात करते हैं।

Answer 3

शुद्ध एचटीएमएल 5 कैनवास फसल। आप इसे लाइव here

$('document').ready(function(){ 
const divOffset = 1 
var x1,x2,y1,y2, xDif, yDif = 0; 
var isSelection, 
    isBottomRight, 
    isTopRight, 
    isTopLeft, 
    isBottomLeft = false 

var r = document.getElementById('source').getBoundingClientRect(); 
var pos = [0, 0]; 
pos[0] = r.left; 
pos[1] = r.top; //got position coordinates of canvas 

var sel = document.getElementById('sel') 
var canvasSource = document.getElementById("source"); 
var ctxSource = canvasSource.getContext("2d"); 

var img = new Image() 
img.src = "http://bohdaq.name/assets/localImage.jpg" 
img.onload = function(){ 
    ctxSource.drawImage(img, 0, 0) 
} 

$("#source").mousedown(function(event) { 
    isSelection = true 

    x1 = event.pageX - pos[0] 
    y1 = event.pageY - pos[1] 

    sel.style.setProperty('display', 'block') 

    sel.style.setProperty('left', event.pageX + "px") 
    sel.style.setProperty('top', event.pageY + "px") 

    sel.style.setProperty('width', '0px') 
    sel.style.setProperty('height', '0px') 
}); 

$("#source").mouseup(function(event) { 
    isSelection = false 
    if(isBottomRight){ 
    x2 = event.pageX - pos[0] 
    y2 = event.pageY - pos[1] 

    xDif = x2-x1 
    yDif = y2-y1 
    } else if (isBottomLeft){ 
    y2 = event.pageY - pos[1] 
    yDif = y2 - y1 

    xDif = x1 - x2 
    x1 = x1 - xDif 

    } else if(isTopRight){ 
    x2 = event.pageX - pos[0] 
    xDif = x2 - x1 
    yDif = y1 - y2 
    y1 = y1 - yDif   
    } else if (isTopLeft){ 
    xDif = x1 - x2 
    x1 = x1 - xDif 
    yDif = y1 - y2 
    y1 = y1 - yDif   
    } 
    sel.style.setProperty('display', 'none') 
    crop(x1, y1, xDif, yDif) 
}); 

$('#source').mousemove(function(event){ 
    if(isSelection){ 
    x2 = event.pageX - pos[0] 
    y2 = event.pageY - pos[1] 
    if(x2>x1 && y2>y1){ //moving right bottom selection 
     isBottomRight = true 
     isBottomLeft = false 
     isTopLeft = false 
     isTopRight = false 

     xDif = x2 - x1 
     yDif = y2 - y1 

     sel.style.setProperty('width', xDif + 'px') 
     sel.style.setProperty('height', yDif + 'px') 
    } else if(x2<x1 && y2>y1){ //moving left bottom selection 
     isBottomLeft = true 
     isTopLeft = false 
     isTopRight = false 
     isBottomRight = false 

     xDif = x1 - x2 
     yDif = y2 - y1 

     sel.style.setProperty('left', x2 + 'px') 
     sel.style.setProperty('width', xDif + 'px') 
     sel.style.setProperty('height', yDif + 'px') 

    } else if(x2>x1 && y2<y1){ 
     isTopRight = true 
     isTopLeft = false 
     isBottomLeft = false 
     isBottomRight = false 

     xDif = y1 - y2 
     yDif = x2 - x1 

     sel.style.setProperty('top', y2 + 'px') 
     sel.style.setProperty('width', yDif + 'px') 
     sel.style.setProperty('height', xDif + 'px') 
    } else if (x2<x1 && y2<y1){ 
     isTopLeft = true 
     isTopRight = false 
     isBottomLeft = false 
     isBottomRight = false 

     yDif = y1 - y2 
     xDif = x1 - x2 

     sel.style.setProperty('left', x2 + pos[0] + divOffset + 'px') 
     sel.style.setProperty('top', y2 + pos[1] + divOffset + 'px') 
     sel.style.setProperty('width', xDif + 'px') 
     sel.style.setProperty('height', yDif + 'px') 
    } 
} 
}) 

function crop(x, y, xDif, yDif){ 
    canvasSource.width = xDif 
    canvasSource.height = yDif 
    ctxSource.drawImage(img, x, y, xDif, yDif, 0, 0, xDif, yDif); 
} 

})