Skip to content

Commit

Permalink
Replace result method with toCanvas and toBlob
Browse files Browse the repository at this point in the history
  • Loading branch information
@theodorejb
theodorejb committed Nov 7, 2023
1 parent baef57b commit cdd76a5
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 92 deletions.
82 changes: 38 additions & 44 deletions croppie.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -227,48 +227,43 @@ export class Croppie {
};
}

result(options) {
var RESULT_DEFAULTS = {
type: 'base64',
format: 'webp',
quality: 1
};

var data = {},
opts = deepExtend(clone(RESULT_DEFAULTS), clone(options)),
size = opts.size || 'viewport',
vpRect = this.elements.viewport.getBoundingClientRect(),
ratio = vpRect.width / vpRect.height;

if (size === 'viewport') {
data.outputWidth = vpRect.width;
data.outputHeight = vpRect.height;
} else if (typeof size === 'object') {
if (size.width && size.height) {
data.outputWidth = size.width;
data.outputHeight = size.height;
} else if (size.width) {
data.outputWidth = size.width;
data.outputHeight = size.width / ratio;
} else if (size.height) {
data.outputWidth = size.height * ratio;
data.outputHeight = size.height;
/**
* Returns a Promise resolving to an HTMLCanvasElement object for the cropped image.
* If size is specified, the image will be scaled with its longest side set to size.
* @param {number | null} size
* @returns {Promise<HTMLCanvasElement>}
*/
toCanvas(size = null) {
var vpRect = this.elements.viewport.getBoundingClientRect();
var ratio = vpRect.width / vpRect.height;
var points = this.getPoints();
var width = points.right - points.left;
var height = points.bottom - points.top;

if (size !== null) {
if (ratio > 1) {
width = size;
height = size / ratio;
} else {
height = size;
width = size * ratio;
}
}

data.format = 'image/' + opts.format;
data.quality = opts.quality;
return Promise.resolve(this.#getCanvas(points, width, height));
}

return new Promise((resolve, reject) => {
if (opts.type === 'rawcanvas') {
resolve(this.#getCanvas(data));
} else if (opts.type === 'base64') {
resolve(this.#getCanvas(data).toDataURL(data.format, data.quality));
} else if (opts.type === 'blob') {
this.#getCanvas(data).toBlob(resolve, data.format, data.quality);
} else {
reject('Invalid result type: ' + opts.type);
}
/**
* @param {number | null} size
* @param {string} type
* @param {number} quality
* @returns {Promise<Blob>}
*/
toBlob(size = null, type = "image/webp", quality = 1) {
return new Promise((resolve) => {
this.toCanvas(size).then((canvas) => {
canvas.toBlob(resolve, type, quality);
});
});
}

Expand Down Expand Up @@ -352,8 +347,7 @@ export class Croppie {
}
}

#getUnscaledCanvas() {
var p = this.getPoints();
#getUnscaledCanvas(p) {
var sWidth = p.right - p.left;
var sHeight = p.bottom - p.top;

Expand All @@ -366,13 +360,13 @@ export class Croppie {
return canvas;
}

#getCanvas(data) {
var oc = this.#getUnscaledCanvas();
#getCanvas(points, width, height) {
var oc = this.#getUnscaledCanvas(points);
var octx = oc.getContext('2d');
var canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
canvas.width = data.outputWidth || oc.width;
canvas.height = data.outputHeight || oc.height;
canvas.width = width;
canvas.height = height;

var cur = {
width: oc.width,
Expand Down
22 changes: 8 additions & 14 deletions demo/demo.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Croppie } from "../croppie.js";

function popupResult(result) {
var html = '<img src="' + result.src + '" class="' + result.viewport + '" />';
var html = '<img src="' + result.src + '" class="' + result.viewport + '" style="max-width: 200px" />';
Swal.fire({
title: '',
html: html,
Expand Down Expand Up @@ -31,11 +31,8 @@ function demoMain () {
});

var mi = document.querySelector('.js-main-image');
mi.addEventListener('click', function (ev) {
cropper1.result({
type: 'rawcanvas',
format: 'png'
}).then(function (canvas) {
mi.addEventListener('click', function () {
cropper1.toCanvas(300).then(function (canvas) {
popupResult({
src: canvas.toDataURL(),
viewport: cropper1.options.viewport.type,
Expand Down Expand Up @@ -64,9 +61,9 @@ function demoBasic() {

var basicResult = document.querySelector('.basic-result');
basicResult.addEventListener('click', function () {
basic.result({ type: 'base64' }).then(function (resp) {
basic.toCanvas(300).then(function (canvas) {
popupResult({
src: resp
src: canvas.toDataURL()
});
});
});
Expand All @@ -89,7 +86,7 @@ function demoResizer() {
console.log('resize update', ev);
});
document.querySelector('.resizer-result').addEventListener('click', function (ev) {
resize.result({ type: 'blob' }).then(function (blob) {
resize.toBlob(300).then(function (blob) {
popupResult({
src: window.URL.createObjectURL(blob)
});
Expand Down Expand Up @@ -135,12 +132,9 @@ function demoUpload() {
});

document.querySelector('.upload-result').addEventListener('click', function (ev) {
uploadCrop.result({
type: 'base64',
size: 'viewport'
}).then(function (resp) {
uploadCrop.toCanvas(300).then(function (canvas) {
popupResult({
src: resp,
src: canvas.toDataURL("image/webp", 1),
viewport: uploadCrop.options.viewport.type,
});
});
Expand Down
58 changes: 24 additions & 34 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,54 +166,43 @@ <h3>Methods</h3>
<strong class="focus">refresh()</strong><em></em>
<p>Recalculate points for the croppie image. Necessary if croppie instance was bound to a hidden element.</p>
</li>
<li id="result">
<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 />
<li id="toCanvas">
<strong class="focus">toCanvas(size)</strong><em>Promise</em>
<p>Returns a Promise resolving to an HTMLCanvasElement object for the cropped image.</p>
<ul class="parameter-list">
<li>
<code class="language-javascript">type</code> The type of result to return defaults to <code class="language-javascript">'base64'</code>
</li>
<li class="values">
<code class="language-javascript">'base64'</code> returns the cropped image encoded in base64
</li>
<li class="values">
<code class="language-javascript">'blob'</code> returns a blob of the cropped image
</li>
<li class="values">
<code class="language-javascript">'rawcanvas'</code> returns the canvas element allowing you to manipulate prior to getting the resulted image
<code class="language-javascript">size</code> If specified, the image will be scaled with its longest side set to size.
</li>
<li>
<code class="language-javascript">size</code> The size of the cropped image defaults to <code class="language-javascript">'viewport'</code>
</li>
<li class="values">
<code class="language-javascript">'viewport'</code> the size of the resulting image will be the same width and height as the viewport
<span class="default">Default:</span><code class="language-javascript">null</code> (the image will not be scaled)
</li>
<li class="values">
<code class="language-javascript">'original'</code> the size of the resulting image will be at the original scale of the image
</ul>
</li>
<li id="toBlob">
<strong class="focus">toBlob(size, type, quality)</strong><em>Promise</em>
<p>Returns a Promise resolving to a Blob object for the cropped image.</p>
<ul class="parameter-list">
<li>
<code class="language-javascript">size</code> If specified, the image will be scaled with its longest side set to size.
</li>
<li class="values">
<code class="language-javascript">{width, height}</code> an object defining the width and height. If only one dimension is specified, the other will be calculated using the viewport aspect ratio.
<li>
<span class="default">Default:</span><code class="language-javascript">null</code> (the image will not be scaled)
</li>
<li>
<code class="language-javascript">format</code> Indicating the image format.
<code class="language-javascript">type</code> A string containing the image format.
</li>
<li class="values">
<span class="default">Default:</span><code class="language-javascript">'webp'</code>
<span class="default">Default:</span><code class="language-javascript">"image/webp"</code>
</li>
<li class="values">
<span class="default">Valid values:</span><code class="language-javascript">'jpeg' | 'png' | 'webp'</code>
<span class="default">Valid Values:</span><code class="language-javascript">"image/webp" | "image/png" | "image/jpeg"</code>
</li>
<li>
<code class="language-javascript">quality</code> Number between 0 and 1 indicating image quality.
<code class="language-javascript">quality</code> A number between 0 and 1 indicating image quality.
</li>
<li class="values">
<span class="default">Default:</span><code class="language-javascript">1</code>
</li>
<li class="values">
<span class="default">Valid Values:</span><code class="language-javascript">true | false</code>
</li>
</ul>
</li>
<li id="setZoom">
Expand All @@ -231,7 +220,7 @@ <h3>Methods</h3>
<h3>Events</h3>
<ul>
<li id="update">
<strong class="focus">update(croppie)</strong><em>Croppie</em>
<strong class="focus">update(event)</strong>
<p>Triggered when a drag or zoom occurs</p>
<pre><code class="language-javascript">document.getElementById('my-croppie').addEventListener('update', function (ev) {
var cropData = ev.detail;
Expand Down Expand Up @@ -264,8 +253,9 @@ <h2>Demos</h2>
points: [77,469,280,739]
});
//on button click
basic.result({ type: 'base64' }).then(function (resp) {
// resp contains data URI which can
basic.toCanvas(300).then((canvas) => {
let src = canvas.toDataURL();
// src contains a data URI which can
// be set as the src of an image element.
});</code></pre>
<div class="actions">
Expand Down Expand Up @@ -296,7 +286,7 @@ <h2>Demos</h2>
zoom: 0,
});
//on button click
resize.result({ type: 'blob' }).then(function (blob) {
basic.toBlob(300, "image/jpeg", 0.9).then((blob) => {
// do something with cropped blob
});</code></pre>
<div class="actions">
Expand Down

0 comments on commit cdd76a5

Please sign in to comment.