<%@ Page Title="Image editor pro - overlays, filters, AVIF" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Image editor pro - AjaxUploader v5.3 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Image editor pro</asp:Content>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<div class="demo-card">
  <div class="demo-card-header">Text + sticker overlays, filter presets, EXIF info, and AVIF/WebP output</div>
  <div class="demo-card-body">
    <p class="demo-description">
      The inline editor now ships an <strong>Overlay</strong> tab (drag-and-drop text and a built-in SVG sticker set), an <strong>Adjust</strong> tab (brightness / contrast / saturation / sepia / grayscale sliders plus one-click presets), an <strong>Info</strong> button (read-only EXIF: camera, date taken, dimensions, file size), and an output picker that now includes <strong>AVIF</strong> and <strong>WebP</strong> with a quality slider. Everything is baked into the saved file entirely client-side.
    </p>
    <div class="demo-expect"><strong>What you should see:</strong> the full editor: content-aware smart-crop, overlays and filters, exporting to modern formats before upload.</div> <div class="card p-3 mt-3" style="background:#fff;border:1px solid #e2e8f0;">
      <label class="form-label fw-semibold small" for="proPicker">Pick an image</label>
      <div class="d-flex flex-wrap align-items-center gap-2">
        <input id="proPicker" type="file" accept="image/*" class="form-control" style="max-width:320px" />
        <select id="proFormat" class="form-select" style="max-width:180px" aria-label="Output format">
          <option value="auto">Output: source</option>
          <option value="jpeg">Output: JPEG</option>
          <option value="webp">Output: WebP</option>
          <option value="avif">Output: AVIF</option>
          <option value="png">Output: PNG</option>
        </select>
      </div>
      <div class="d-flex gap-2 mb-2 mt-3">
        <button type="button" class="btn btn-primary" id="startBtn_proOutput">Start upload</button>
        <button type="button" class="btn btn-outline-secondary" id="clearBtn_proOutput">Clear queue</button>
      </div>
      <div id="proOutput"></div>
      <p class="mt-2 text-muted small mb-0">In the editor: click <strong>Overlay</strong> to add text/stickers, <strong>Adjust</strong> for filters, <strong>Info</strong> for EXIF, then pick a format and Save.</p>
    </div>
    <script> (function () {
      function init() {
        if (!window.AjaxUploader || typeof AjaxUploader.create !== 'function') return;
        var picker = document.getElementById('proPicker');
        var fmt = document.getElementById('proFormat');
        var output = document.getElementById('proOutput');
        var uploader = AjaxUploader.create(output, {
          uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
          multiple: true,
          autoUpload: false,
          outputFormat: fmt ? fmt.value : 'auto',
          outputQuality: 85
        });
        if (!picker) return;
        picker.addEventListener('change', function (e) {
          var file = e.target.files && e.target.files[0];
          if (!file) return;
          var format = fmt ? fmt.value : 'auto';
          if (!uploader || typeof uploader.openImageEditor !== 'function') return;
          uploader.openImageEditor(file, { outputType: format === 'auto' ? undefined : ('image/' + format) })
            .then(function (edited) {
              if (uploader && typeof uploader.addFile === 'function') uploader.addFile(edited);
            })
            .catch(function () { /* cancelled */ });
        });
        var startButton = document.getElementById('startBtn_proOutput');
        var clearButton = document.getElementById('clearBtn_proOutput');
        if (startButton) {
          startButton.addEventListener('click', function () {
            if (uploader && typeof uploader.upload === 'function') uploader.upload();
          });
        }
        if (clearButton) {
          clearButton.addEventListener('click', function () {
            if (uploader && typeof uploader.clear === 'function') uploader.clear();
          });
        }
      }
      if (document.readyState !== 'loading') init();
      else document.addEventListener('DOMContentLoaded', init);
    })(); </script>
    <div class="alert alert-info mt-3" role="alert">
      <strong>Try it:</strong> pick a photo, open <strong>Overlay</strong>, click <strong>Add text</strong> and a sticker, drag them into place, switch to <strong>Adjust</strong> and try the <strong>Vivid</strong> preset, choose <strong>AVIF</strong> output, then Save. The exported file carries everything baked in.
    </div>
    <h5 class="mt-4">URL-based transforms</h5>
    <p>Build CDN/server transform URLs with a consistent query-string contract:</p>
    <div class="code-panel">
<pre><code><span style="color:#94a3b8">// -&gt; '/img/a.jpg?w=400&amp;h=400&amp;fit=cover&amp;format=avif&amp;q=80'</span>
var url = AjaxUploader.transformUrl('/img/a.jpg', {
    w: 400, h: 400, fit: 'cover', format: 'avif', q: 80
});

<span style="color:#94a3b8">// Server side: pull the params back out of the request URL</span>
var t = AjaxUploader.parseTransformUrl(url); <span style="color:#94a3b8">// { w:400, h:400, fit:'cover', format:'avif', q:80 }</span></code></pre>
    </div>
    <h5 class="mt-4">Output formats</h5>
    <ul class="mb-3">
      <li><code>outputFormat: 'avif'</code> - smallest files; falls back to WebP then JPEG on browsers without an AVIF encoder.</li>
      <li><code>outputFormat: 'webp'</code> - broad support; falls back to JPEG on very old Safari.</li>
      <li><code>outputQuality: 1-100</code> - applies to JPEG / WebP / AVIF (ignored for PNG).</li>
    </ul>
  </div>
</div>
</asp:Content>
