Блог

Я использую редактор изображений Tui. В частности, я работаю с примером 01, включающим пользовательский интерфейс.

Мне нужно получить отредактированное изображение с холста и записать его обратно на сервер. Как мне решить эту проблему?

Я обнаружил, что то, что я пробовал ниже, было изменено на:

 document.getElementsByClassName("upper-canvas "); 
 

с конечным пробелом после холста, как я вижу при проверке.

HTML

 <div>
    <button onClick="saveCards();">Save</button>
</div>
 

JavaScript

 <script type="text/javascript">
function saveCards()
{ 
  var canvas = document.getElementsByClassName("upper-canvas ");
  var i;
  alert("stops");
  var theString = canvas.toDataURL();

  var postData = "CanvasData=" theString;
  var ajax = new XMLHttpRequest();
  ajax.open("POST", 'saveCards.php', true);
  ajax.setRequestHeader('Content-Type', 'canvas/upload');

  ajax.onreadystatechange=function() {
    if(ajax.readyState == 4) {
      alert("image was saved");
    } else {
      alert("image was not saved");
    }
  }
  ajax.send(postData);
}
</script>
 

PHP

 <?php

if(isset($GLOBALS['HTTP_RAW_POST_DATA']));
{

$rawImage=$GLOBALS['HTTP_RAW_POST_DATA'];
$removeHeaders=substr($rawImage,strpos($rawImage, ",") 1);
  $decode=base64_decode($removeHeaders);
  $fopen= fopen('image/image.png', 'wb');
  fwrite($fopen, $decode);
  fclose($fopen);
}
?>
 

Я получаю ошибку «stop», которая, как я предполагаю, означает, что она не получает холст.

Из-за нехватки документации трудно найти нужную информацию.

Если кому-то интересно, как этого добиться (как и мне), вы можете использовать ImageEditor.toDataURL() чтобы получить данные изображения, затем преобразуйте их в BLOB. Затем это можно отправить через ajax (я использую jQuery, но это можно сделать с помощью обычного javascript).

Затем сервер (APACHE PHP в моем экземпляре) получит $_FILES[‘croppedImage’], который вы можете использовать для хранения на своем сервере, как хотите. (Есть много руководств, объясняющих этот шаг)

 
// LAUNCH TUI EDITOR
var imageEditor = new tui.ImageEditor('#tui-image-editor', {
    includeUI: {
        loadImage: {
            path: 'sampleimage.png',
            name: 'SampleImage'
        },
        theme: whiteTheme,
        initMenu: 'filter',
        menuBarPosition: 'left'
    },
    cssMaxWidth: 700,
    cssMaxHeight: 1000,
    usageStatistics: false
});

// MAKE THE EDITOR RESPONSIVE
window.onresize = function() {
    imageEditor.ui.resizeEditor();
}

// FUNCTION TO CONVERT DATA-URL to BLOB
function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
}

// JQUERY 
jQuery(document).ready(function ($) {

    // LISTEN TO THE CLICK AND SEND VIA AJAX TO THE SERVER
    $('.doSaveFile').on('click', function (e) {

        // GET TUI IMAGE AS A BLOB
        var blob = dataURLtoBlob(imageEditor.toDataURL());

        // PREPARE FORM DATA TO SEND VIA POST
        var formData = new FormData();
        formData.append('croppedImage', blob, 'sampleimage.png');

        // SEND TO SERVER
        $.ajax({
            url: '/files/upload_files/', // upload url
            method: "POST",
            data: formData,
            success: function (data) {
                alert('UPLOADED SUCCESSFULLY, PLEASE TRY AGAIN...');
            },
            error: function(xhr, status, error) {
                alert('UPLOAD FAILED, PLEASE TRY AGAIN...');
            }
        });
        return false;
    });
});
 

если вы используете react, вы можете использовать этот метод.

используйте ImageEditor.toDataURL() для получения данных изображения. затем преобразуйте его в большой двоичный объект. а затем преобразуйте его в формат JPEG. Я использую API для отправки изображения на сервер.

редактор изображений холста

 <ImageEditor
                                ref={editorRef}
                                includeUI={{
                                  loadImage: {
                                    path:
                                      APP_URL   imageName,
                                    name: imageName,
                                  },
                                  theme: myTheme,
                                  menu: [
                                    "filter",
                                    "crop",
                                    "flip",
                                    "rotate",
                                    "text",
                                  ],
                                  initMenu: "filter",
                                  menuBarPosition: "bottom",
                                }}
                              />
 

сохраните функцию и отправьте ее на сервер.

 saveImage(image) {
const editorInstance = editorRef.current.getInstance();
const data = editorInstance.toDataURL();
var blob = dataURItoBlob(data);
const file = new File([blob], `edited-`   image, {
  type: "image/jpeg",
  lastModified: new Date(),
});

DataService.upload(file, (event) => {})
  .then((response) => {
    this.setState((prev) => {
      let nextMessage = [...prev.message, "File successfully Sent"];
      return {
        message: nextMessage,
      };
    });
    return DataService.getFiles();
  })
  .then((files) => {
    this.setState({
      fileInfos: files.data,
    });
  })
  .catch(() => {
    this.setState((prev) => {
      let nextMessage = [...prev.message, "Could not sent the file"];
      return {
        message: nextMessage,
      };
    });
  });}
 

функция преобразует dataurl в blob.

 dataURItoBlob(dataURI) {
var byteString = atob(dataURI.split(",")[1]);
var mimeString = dataURI.split(",")[0].split(":")[1].split(";")[0];

var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i  ) {
  ia[i] = byteString.charCodeAt(i);
}

return new Blob([ab], { type: mimeString });}