Question

I am using Tui Image editor. Specifically, I am working from example 01 Include UI.

I need to get the edited image from the canvas and write it back to the server. How do I solve this problem?

I found what I have tried below changed to:

document.getElementsByClassName("upper-canvas ");

with the trailing space after canvas as I see it when inspecting.

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

I get the "stop" error which I would assume means it is not getting the canvas.

Answer 1

当前缺乏文档，这使得查找所需信息变得困难。

如果有人想知道如何实现此目的（就像我以前一样），则可以使用imageEditor.toDataURL（）获取图像，然后转换为BLOB，然后可以通过ajax发送。

服务器（在我的实例中为PHP）将收到$ _FILES ['croppedImage']，您可以使用该$ _FILES ['croppedImage']来存储所需的内容。（有很多教程解释了该步骤）

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
});
window.onresize = function() {
    imageEditor.ui.resizeEditor();
}

//**dataURL 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(document).ready(function ($) {

    $('.doSaveFile').on('click', function (e) {
        var blob = dataURLtoBlob(imageEditor.toDataURL());
        var formData = new FormData();
        formData.append('croppedImage', blob, 'sampleimage.png');
        $.ajax({
            url: '/files/upload_files/', // upload url
            method: "POST",
            data: formData,
            success: function (data) {
                window.location('/files/');
            },
            error: function(xhr, status, error) {
                alert('UPLOAD FAILED, PLEASE TRY AGAIN...');
            }
        });

        return false;
    });
});

Writing tui image editor canvass to server

html

JavaScript

PHP

1 个答案: