Remove option to crop result to a circle

onstuimig · Nov 5, 2023 · ae2b073 · ae2b073
1 parent 47c4c8b
commit ae2b073
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 33 deletions.
diff --git a/croppie.css b/croppie.css
@@ -42,13 +42,13 @@
 }
 
 .croppie-container .cr-resizer-vertical,
-.croppie-container .cr-resizer-horisontal {
+.croppie-container .cr-resizer-horizontal {
   position: absolute;
   pointer-events: all;
 }
 
 .croppie-container .cr-resizer-vertical::after,
-.croppie-container .cr-resizer-horisontal::after {
+.croppie-container .cr-resizer-horizontal::after {
     display: block;
     position: absolute;
     box-sizing: border-box;
@@ -71,14 +71,14 @@
     margin-left: -5px;
 }
 
-.croppie-container .cr-resizer-horisontal {
+.croppie-container .cr-resizer-horizontal {
   right: -5px;
   cursor: col-resize;
   width: 10px;
   height: 100%;
 }
 
-.croppie-container .cr-resizer-horisontal::after {
+.croppie-container .cr-resizer-horizontal::after {
     top: 50%;
     margin-top: -5px;
 }

diff --git a/croppie.js b/croppie.js
@@ -245,7 +245,7 @@
 
         if (this.options.resizeControls.width) {
             hr = document.createElement('div');
-            hr.classList.add('cr-resizer-horisontal');
+            hr.classList.add('cr-resizer-horizontal');
             wrap.appendChild(hr);
         }
 
@@ -882,7 +882,6 @@
             bottom = num(points[3]),
             width = right-left,
             height = bottom-top,
-            circle = data.circle,
             canvas = document.createElement('canvas'),
             ctx = canvas.getContext('2d'),
             canvasWidth = data.outputWidth || width,
@@ -932,14 +931,7 @@
         }
 
         ctx.drawImage(this.elements.preview, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
-        if (circle) {
-            ctx.fillStyle = '#fff';
-            ctx.globalCompositeOperation = 'destination-in';
-            ctx.beginPath();
-            ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2, 0, Math.PI * 2, true);
-            ctx.closePath();
-            ctx.fill();
-        }
+
         return canvas;
     }
 
@@ -1073,7 +1065,6 @@
             size = opts.size || 'viewport',
             format = opts.format,
             quality = opts.quality,
-            circle = typeof opts.circle === 'boolean' ? opts.circle : (self.options.viewport.type === 'circle'),
             vpRect = self.elements.viewport.getBoundingClientRect(),
             ratio = vpRect.width / vpRect.height,
             prom;
@@ -1099,7 +1090,6 @@
             data.quality = quality;
         }
 
-        data.circle = circle;
         data.url = self.data.url;
 
         prom = new Promise(function (resolve) {

diff --git a/demo/demo.css b/demo/demo.css
@@ -1,12 +1,3 @@
-/* 
-Colors
-#20C1C7
-#204648
-#189094
-#61CED2
-#0C4648
-*/
-
 html {
     scroll-behavior: smooth;
 }
@@ -25,6 +16,10 @@ body {
     height: auto;
 }
 
+img.circle {
+    border-radius: 50%;
+}
+
 body,
 button,
 input {

diff --git a/demo/demo.js b/demo/demo.js
@@ -1,6 +1,6 @@
 var Demo = (function() {
 	function popupResult(result) {
-		var html = '<img src="' + result.src + '" />';
+		var html = '<img src="' + result.src + '" class="' + result.viewport + '" />';
 		Swal.fire({
 			title: '',
 			html: html,
@@ -33,11 +33,11 @@ var Demo = (function() {
 		mi.addEventListener('click', function (ev) {
 			cropper1.result({
 				type: 'rawcanvas',
-				circle: true,
             	format: 'png'
             }).then(function (canvas) {
 				popupResult({
-					src: canvas.toDataURL()
+					src: canvas.toDataURL(),
+					viewport: cropper1.options.viewport.type,
 				});
 			});
 		});
@@ -139,7 +139,8 @@ var Demo = (function() {
 				size: 'viewport'
 			}).then(function (resp) {
 				popupResult({
-					src: resp
+					src: resp,
+					viewport: uploadCrop.options.viewport.type,
 				});
 			});
 		});

diff --git a/index.html b/index.html
@@ -159,7 +159,7 @@ <h3>Methods</h3>
                             <p>Destroy a croppie instance and remove it from the DOM</p>
                         </li>
                         <li id="result">
-                            <strong class="focus">result({ type, size, format, quality, circle })</strong><em>Promise</em>
+                            <strong class="focus">result({ type, size, format, quality })</strong><em>Promise</em>
                             <p>Get the resulting crop of the image.</p>
                             <span class="default">Parameters</span>
                             <br />
@@ -203,9 +203,6 @@ <h3>Methods</h3>
                                 <li class="values">
                                     <span class="default">Default:</span><code class="language-javascript">1</code>
                                 </li>
-                                <li>
-                                     <code class=" language-javascript">circle</code> force the result to be cropped into a circle
-                                </li>
                                 <li class="values">
                                     <span class="default">Valid Values:</span><code class="language-javascript">true | false</code>
                                 </li>