Резка изображения на куски через Javascript

Я создаю простую головоломку. Чтобы сделать это, мне нужно вырезать картинку, которую я использую, на 20 штук. Есть ли способ в Javascript разрезать изображение на 20 равных частей и сохранить их как 20 разных объектов на веб-странице? Или мне просто нужно пойти в фотошоп и вырезать каждую фотографию и позвонить?Резка изображения на куски через Javascript

источник

2012-01-18 TheChes44

Холст элемент позволит вам «вырезать» части, но точно, как сделать это будет зависеть от ваших конкретных требований вокруг того, что вы хотите * сделать * с кусочками. – Pointy

Я хочу, чтобы части могли быть перетаскиваемыми и отбрасываемыми. В настоящее время я использую Jquery для этой задачи, но поскольку эта функция не поддерживается, а сторонние надстройки не работают, я уклоняюсь от использования JQuery. Я могу перейти на HTML5, если он может перетащить. В любом случае, я в основном хочу 20 разных изображений, которые я могу перетащить на кадр, чтобы они могли «решить» загадку. – TheChes44

Вы можете сделать это, установив изображение в качестве фона на div, а затем установите его фоновое положение. Это в основном то же самое, что и с использованием CSS Sprites.

(предположим, что куски 100 х 100px)

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

CSS:

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

.piece1 { 
    background-position:0 0 
} 

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

источник

2012-01-18 15:43:14

Теперь я могу сделать это с помощью идентификаторов div? – TheChes44

Конечно, такой же. –

Это легко сделать с помощью Canvas. Основная идея заключается в:

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]; 
}

источник

2012-01-18 15:46:25

Это может дать SecurityError: Не удалось выполнить 'toDataURL' в 'HTMLCanvasElement': Tainted canvas не может быть экспортирован. –

Спасибо за это Мэтт. –

@MertKoksal Его из-за CORS Вы можете установить: img.setAttribute ('crossOrigin', 'anonymous'); : https://stackoverflow.com/a/20424457/7121889 –

вы можете использовать метод 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/

источник

2013-01-10 12:53:00 Matoeil

Резка изображения на куски через Javascript

ответ

Смежные вопросы