Question

$("#fileinput").change(function (e) {
     var ctx = document.getElementById('canvas').getContext('2d');
     var img = new Image();
     img.src = URL.createObjectURL(e.target.files[0]);
     img.onload = function () {
          ctx.drawImage(img, 0, 0, img.width, img.height,
             0, 0, canvas.width, canvas.height);}
     });

到目前为止它运作良好。现在我尝试通过ajax-

将图像作为表单数据发送到服务器

var fd = new FormData();
var canvasData = canvas.toDataURL("image/png");
//I tried
var canvasData = canvas.getImageData();
//Gives Uncaught TypeError: canvas.getImageData is not a function(…)
fd.append("InsidePhoto", canvasData);

但它什么也没发送。 Ajax代码已经过测试并且工作正常。我想我无法从画布中获取图像。有什么想法吗？

Answer 1

这是一个有效的例子。很难说明你的问题在于你所省略的代码。例如，在第二个代码段中，我们无法判断canvas是否有效。

php code：（postExample.php）

<?php
    //postExample.php
    printf("<img src='%s'/>", $_POST['InsidePhoto']);
?>

html代码

<!doctype html>
<html>
<head>
<script>
"use strict";
function newEl(tag){return document.createElement(tag)}
function byId(id){return document.getElementById(id)}

function ajaxPostFormData(url, formData, onSuccess, onError)
{
    var ajax = new XMLHttpRequest();
    ajax.onload = function(){onSuccess(this);}
    ajax.onerror = function(){onError(this);}
    ajax.open("POST",url,true);
    ajax.send(formData);
}


window.addEventListener('load', onDocLoaded, false);

function onDocLoaded(evt)
{
    byId('imgInput').addEventListener('change', onFileInputChanged, false);
}
function onFileInputChanged(evt)
{
    var can = byId('preview'), ctx = can.getContext('2d');
    var img = new Image();
    img.onload = function()
                {
                    can.width = img.width;
                    can.height = img.height;
                    ctx.drawImage(img,0,0);

                    var fd = new FormData();
                    var canvasData = can.toDataURL("image/png");
                    fd.append("InsidePhoto", canvasData);
                    ajaxPostFormData('postExample.php', fd, onSuccess, onError)
                }

    var dataSrc = URL.createObjectURL(this.files[0]);
    img.src = dataSrc;

    function onSuccess(ajax)
    {
        console.log(ajax.response);
        var div = newEl('div');
        div.innerHTML = ajax.response;
        document.body.appendChild( div.childNodes[0] );
    }
    function onError(ajax)
    {
        console.log(ajax.response);
    }
}
</script>
<style>
</style>
</head>
<body>
    <input type='file' id='imgInput'/>
    <canvas id='preview'></canvas>
</body>
</html>

Answer 2

您需要使用CanvasRenderingContext2D的{{1}}函数来获取画布'图像数据而不是画布元素。

前2个值是起始位置，将这些值设置为0以从左上角开始。

第二个2值是区域的宽度和高度，因此分别将它们设置为canvas.width和canvas.height。

从html5画布保存图像

2 个答案:

php code：（postExample.php）

html代码