将 tui 图像编辑器画布写入服务器

Question

我正在使用Tui Image editor。具体来说，我正在从示例 01 Include UI 开始工作。

我需要从画布中获取编辑后的图像并将其写回服务器。我该如何解决这个问题？

我发现我在下面尝试过的内容更改为：

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);
}
?>

我收到“停止”错误，我认为这意味着它没有获取画布。

Answer 1

目前缺乏文档，因此很难找到您要查找的信息。

如果有人想知道如何实现这一点（就像我一样），您可以使用 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;
    });
});

Answer 2

如果你使用的是react，你可以使用这个方法。

使用 imageEditor.toDataURL() 获取图像数据。然后将其转换为 BLOB。然后将其转换为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 });}