cscg24-photoeditor

CSCG 2024 Challenge 'PhotoEditor'
git clone https://git.sinitax.com/sinitax/cscg24-photoeditor
Log | Files | Refs | sfeed.txt

site.js (2315B)


      1// Please see documentation at https://learn.microsoft.com/aspnet/core/client-side/bundling-and-minification
      2// for details on configuring this project to bundle and minify static web assets.
      3
      4// Write your JavaScript code.
      5
      6function getBase64Image(img) {
      7    // Create an empty canvas element
      8    var canvas = document.createElement("canvas");
      9    canvas.width = img.width;
     10    canvas.height = img.height;
     11
     12    // Copy the image contents to the canvas
     13    var ctx = canvas.getContext("2d");
     14    ctx.drawImage(img, 0, 0);
     15
     16    // Get the data-URL formatted image
     17    // Firefox supports PNG and JPEG. You could check img.src to
     18    // guess the original format, but be aware the using "image/jpg"
     19    // will re-encode the image.
     20    var dataURL = canvas.toDataURL("image/png");
     21
     22    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
     23}
     24
     25var loadFile = function(event) {
     26	var image = document.getElementById('output');
     27	image.src = URL.createObjectURL(event.target.files[0]);
     28};
     29
     30function downloadImage() {
     31    var a = document.createElement("a"); //Create <a>
     32    a.href = "data:image/png;base64," + getBase64Image(document.getElementById("output")); //Image Base64 Goes here
     33    a.download = "Cool_modified_image.png"; //File name Here
     34    a.click(); //Downloaded file
     35}
     36
     37function editImage(action, params, types) {
     38    $('#passwordsNoMatchRegister').slideDown();
     39    $.ajax({
     40        type: "POST",
     41        url: "/api/DynamicPhotoEditor/EditImage",
     42        data: JSON.stringify(
     43            {
     44                Base64Blob: getBase64Image(document.getElementById("output")), 
     45                DynamicAction: action, 
     46                Parameters:JSON.stringify(params),
     47                Types: (types == undefined) ? null : types
     48            }),
     49        dataType: "json",
     50        contentType: "application/json",
     51
     52        success: function (msg) {
     53            document.getElementById("output").src = "data:image/png;base64," + msg.base64Blob;
     54            $('#lastException').hide();
     55        },
     56        error: function (req, status, error) {
     57            var error_obj = JSON.parse(req.responseText);
     58            document.getElementById("lastException").innerText = error_obj.error;
     59            $('#lastException').fadeIn(500);
     60        }
     61    });
     62}