Обрезать изображение, отображаемое на canvasе.

У меня есть тег canvas:

 

Я хочу добавить функциональность crop, поэтому я сделал divizeable div, который может идентифицировать границы обрезанного изображения, перетаскивая углы div с помощью мыши. Это похоже на изображение ниже:

введите описание изображения здесь

введите описание изображения здесь

В настоящее время я использую «toDataURL ()» для преобразования данных из canvass в изображение, которое может отображаться тегом . Мой вопрос: как мне преобразовать в изображение только часть canvasа, которая была идентифицирована с помощью resizeable div?

Используйте метод getImageData с выбранными координатами прямоугольника. Например:

 var imageData = ctx.getImageData(65, 60, 100, 100); 

Затем создайте вторичный canvas с требуемыми размерами и используйте puImageData для установки пикселей:

 var canvas1 = document.createElement("canvas"); canvas1.width = 100; canvas1.height = 100; var ctx1 = canvas1.getContext("2d"); ctx1.rect(0, 0, 100, 100); ctx1.fillStyle = 'white'; ctx1.fill(); ctx1.putImageData(imageData, 0, 0); 

Наконец, используйте toDataURL для обновления изображения:

 dstImg.src = canvas1.toDataURL("image/png"); 

См. Полный образец, который я подготовил для вас в CodePen

Создайте новый canvas в размере адресата, нарисуйте обрезанное изображение с помощью drawImage () и вставьте этот canvas в DOM, избегая использования img и data-uri:

 var ccanvas = document.createElement("canvas"), cctx = ccanvas.getContext("2d"); ccanvas.width = w; ccanvas.height = h; // draw with crop arguments cctx.drawImage(image_src, x, y, w, h, 0, 0, w, h); // ^^^^^^^^^^ source region // ^^^^^^^^^^ dest. region // insert cropped image somewhere in the DOM tree: document.body.appendChild(ccanvas); 
 window.onload = function() { var img = document.getElementById("image_src"); document.body.appendChild(region2canvas(img, 150, 60, 220, 200)); } function region2canvas(img, x, y, w, h) { var ccanvas = document.createElement("canvas"), cctx = ccanvas.getContext("2d"); ccanvas.width = w; ccanvas.height = h; // draw with crop arguments cctx.drawImage(img, x, y, w, h, 0, 0, w, h); return ccanvas; } 
  

Создайте новый canvas и скопируйте выбранную часть в новый canvas, а затем получите toDataURL () из этого нового canvasа.

Ключ к обрезке с одного изображения заключается в том, что метод drawImage контекста позволяет нам отображать обрезанный раздел исходного изображения на canvas.

 context.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh); 

imgОбъект исходного изображения
sxИсточник x
syИсточник y
swШирина источника
shВысота источника
dxНазначение x
dyНазначение y
dwШирина адресата
dhВысота места назначения