जावास्क्रिप्ट

Question

के माध्यम से एक छवि को टुकड़ों में काटना मैं एक साधारण आरा पहेली बना रहा हूं। ऐसा करने के लिए, मुझे उस तस्वीर को काटना होगा जिसे मैं 20 टुकड़ों में उपयोग कर रहा हूं। जावास्क्रिप्ट में 20 बराबर टुकड़ों में एक तस्वीर काटने और वेबपृष्ठ के भीतर उन्हें 20 अलग-अलग वस्तुओं के रूप में सहेजने का कोई तरीका है? या क्या मुझे बस फ़ोटोशॉप में जाना है और प्रत्येक तस्वीर को अपने आप में कटौती करना है और इसे कॉल करना है?

Answer 1

आप छवि को एक div पर पृष्ठभूमि के रूप में सेट करके, फिर अपनी पृष्ठभूमि-स्थिति सेट करके ऐसा कर सकते हैं। यह मूल रूप से CSS Sprites का उपयोग करने जैसा ही है।

(मान टुकड़े 100 x 100px हैं)

<div class="puzzle piece1"></div> 
<div class="puzzle piece2"></div> 

सीएसएस:

.puzzle { 
    background-image:url(/images/puzzle.jpg); 
    width:100px; 
    height:100px; 
} 

.piece1 { 
    background-position:0 0 
} 

.piece2 { 
    background-position:-100px -100px 
} 

Answer 2

इस कैनवास के साथ क्या करना आसान है। सामान्य विचार है:

var image = new Image(); 
image.onload = cutImageUp; 
image.src = 'myimage.png'; 

function cutImageUp() { 
    var imagePieces = []; 
    for(var x = 0; x < numColsToCut; ++x) { 
     for(var y = 0; y < numRowsToCut; ++y) { 
      var canvas = document.createElement('canvas'); 
      canvas.width = widthOfOnePiece; 
      canvas.height = heightOfOnePiece; 
      var context = canvas.getContext('2d'); 
      context.drawImage(image, x * widthOfOnePiece, y * heightOfOnePiece, widthOfOnePiece, heightOfOnePiece, 0, 0, canvas.width, canvas.height); 
      imagePieces.push(canvas.toDataURL()); 
     } 
    } 

    // imagePieces now contains data urls of all the pieces of the image 

    // load one piece onto the page 
    var anImageElement = document.getElementById('myImageElementInTheDom'); 
    anImageElement.src = imagePieces[0]; 
} 

Answer 3

आप एक स्रोत छवि के कुछ हिस्सों काट करने के लिए drawImage विधि का उपयोग करें और उन्हें एक कैनवास के लिए आकर्षित कर सकते हैं:

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 

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

कुछ की तरह:

document.getElementById("vangogh").onclick=function() 
    { 
    draw(); 
    }; 

function draw() { 
    var ctx = document.getElementById('canvas').getContext('2d'); 
    ctx.drawImage(document.getElementById('source'),33,45); 
       } 

फिर अपनी नई इकाइयों के लिए खींचने योग्य सामग्री बनाएं:

<div id="columns"> 
    <div class="column" draggable="true"><header>A</header></div> 
    <div class="column" draggable="true"><header>B</header></div> 
    <div class="column" draggable="true"><header>C</header></div> 
</div> 

http://www.html5rocks.com/en/tutorials/dnd/basics/