8 (8452) 32-00-84

Как нарисовать и обрезать изображение Canvas HTML5

Задача следующая. Сделать Интернет-магазин фотообоев и фресок. Обязательно должно быть в функционале:

Изначально используемые плагины:

Рабочий код:

<div style="display: none;">
        	<?php
        		if ( has_post_thumbnail() ) { // если товар имеет картинку миниатюру, то выводим код ниже, от слова has перевод иметь.
        			$attachment_count = count( $product->get_gallery_attachment_ids() ); // переменная $количество_вложений - Подсчитывает количество элементов массива - Возвращает ID картинок.
        			$gallery          = $attachment_count > 0 ? '[product-gallery]' : ''; // если картинок больше чем 0, product-gallery
        			$props            = wc_get_product_attachment_props( get_post_thumbnail_id(), $post ); // получаем данные о вложении например текст alt и прочие. Параметры - получить картинки миниатюры поста.
        			$image            = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), array(
        				'title'	 => $props['title'],
        				'alt'    => $props['alt'],
                		'id'      => 'source',
        			) );
        			echo apply_filters(
        				'woocommerce_single_product_image_html',
        				sprintf( // Возвращает отформатированную строку
        					'%s',
        					$image
        				),
        				$post->ID
        			);
        		} else { // если у товара нет картинки миниатюры выводим код ниже.
        			echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="%s" />', wc_placeholder_img_src(), __( 'Placeholder', 'woocommerce' ) ), $post->ID );
        		}
 
        		do_action( 'woocommerce_product_thumbnails' );
        	?>
</div>
<img id="texture1" style="display: none;" src="http://affresco.ru/upload/iblock/269/269d5a7adecff70dbb9787c44b88c85a.png">
<img id="texture2" style="display: none;" src="http://affresco.ru/upload/iblock/5d7/5d746d2d3e7674e1c30bb023a02fd53f.png">
<img id="texture3" style="display: none;" src="http://affresco.ru/upload/iblock/6ee/6eee7672d9cbd437dae1ba34e999bd19.png">
<img id="texture4" style="display: none;" src="http://affresco.ru/upload/iblock/7ee/7eeb1e6abec1d53ed64324b9b9d65e8a.png">
<img id="texture5" style="display: none;" src="http://affresco.ru/upload/iblock/8e4/8e457ee11b20a4e0ab612af10b792f85.png">
<img id="texture6" style="display: none;" src="http://affresco.ru/upload/iblock/f87/f870687bc4091756dab4bbcf44f714dd.png">
<img id="texture7" style="display: none;" src="http://pngimg.com/upload/sofa_PNG6949.png">
<img id="texture8" style="display: none;" src="http://sn1.kz/images/holodilnik.png">
<img id="texture9" style="display: none;" src="http://www.skullshaver.com/skin/frontend/butterfly/default/images/photodune-1359785-bikini-girl-m2.png">
<img id="texture10" style="display: none;" src="http://aleksandr-borodach.ru/wp-content/uploads/2016/01/1.png">
 
<style type="text/css">
    
img {
  max-width: 100%;
}
 
</style>
 
<div><canvas id="canvas" width="790" height="500"></canvas></div>
 
<button onclick="myFunction1('repeat')">Серебро</button>
<button onclick="myFunction2('repeat')">Золото</button>
<button onclick="myFunction3('repeat')">Штукатурка</button>
<button onclick="myFunction4('repeat')">Трещины</button>
<button onclick="myFunction5('repeat')">Фреска</button>
<button onclick="myFunction6('repeat')">Флиссе</button>
<button onclick="myFunction7('repeat')">Внедрить диван</button>
<button onclick="myFunction8('repeat')">Внедрить холодильник</button>
<button onclick="myFunction9('repeat')">Девушка</button>
<button onclick="myFunction10('repeat')">Саша Бородач</button>
<button type="button" class="btn btn-primary" data-method="getCroppedCanvas">
    <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;getCroppedCanvas&quot;)">
    Обрезать
  </span>
</button>
<button type="button" class="btn btn-primary" data-method="scaleX" data-option="-1" title="Flip Horizontal">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;scaleX&quot;, -1)">
  Отразить
</span>
</button>
 
 
 
<script type="text/javascript">
 
 
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var image = document.getElementById("source");
ctx.drawImage(image, 0, 0);
 
 
function myFunction1() {
    var image = document.getElementById("source");
    ctx.drawImage(image, 0, 0);
    var image1 = document.getElementById("texture1");
    var ptrn = ctx.createPattern(image1,'repeat');
    ctx.fillStyle = ptrn;
    ctx.fillRect(0,0,1500,1500);
}
 
function myFunction2() {
    var image = document.getElementById("source");
    ctx.drawImage(image, 0, 0);
    var image2 = document.getElementById("texture2");
    var ptrn = ctx.createPattern(image2,'repeat');
    ctx.fillStyle = ptrn;
    ctx.fillRect(0,0,1500,1500);
}
 
function myFunction3() {
    var image = document.getElementById("source");
    ctx.drawImage(image, 0, 0);
    var image3 = document.getElementById("texture3");
    var ptrn = ctx.createPattern(image3,'repeat');
    ctx.fillStyle = ptrn;
    ctx.fillRect(0,0,1500,1500);
}
 
function myFunction4() {
    var image = document.getElementById("source");
    ctx.drawImage(image, 0, 0);
    var image4 = document.getElementById("texture4");
    var ptrn = ctx.createPattern(image4,'repeat');
    ctx.fillStyle = ptrn;
    ctx.fillRect(0,0,1500,1500);
}
 
function myFunction5() {
    var image = document.getElementById("source");
    ctx.drawImage(image, 0, 0);
    var image5 = document.getElementById("texture5");
    var ptrn = ctx.createPattern(image5,'repeat');
    ctx.fillStyle = ptrn;
    ctx.fillRect(0,0,1500,1500);
}
 
function myFunction6() {
    var image = document.getElementById("source");
    ctx.drawImage(image, 0, 0);
    var image6 = document.getElementById("texture6");
    var ptrn = ctx.createPattern(image6,'repeat');
    ctx.fillStyle = ptrn;
    ctx.fillRect(0,0,1500,1500);
}
 
function myFunction7() {
    var image = document.getElementById("source");
    ctx.drawImage(image, 0, 0);
    var image7 = document.getElementById("texture7");
    ctx.drawImage(image7, 0, 300, 500, 250);
}
 
function myFunction8() {
    var image = document.getElementById("source");
    ctx.drawImage(image, 0, 0);
    var image8 = document.getElementById("texture8");
    ctx.drawImage(image8, 100, 70, 250, 450);
}
 
function myFunction9() {
    var image = document.getElementById("source");
    ctx.drawImage(image, 0, 0);
    var image9 = document.getElementById("texture9");
    ctx.drawImage(image9, 100, 70, 250, 450);
}
 
function myFunction10() {
    var image = document.getElementById("source");
    ctx.drawImage(image, 0, 0);
    var image10 = document.getElementById("texture10");
    ctx.drawImage(image10, 100, 70, 320, 450);
}
 
$('#canvas').cropper({
    guides: false,
background: false,
autoCropArea: .8,
zoomable: false,
  crop: function(e) {
    console.log(e.x);
    console.log(e.y);
    console.log(e.width);
    console.log(e.height);
    console.log(e.rotate);
    console.log(e.scaleX);
    console.log(e.scaleY);
  }
});
 
</script>