Question

我想在我的服务器上注册png图像，来自用户的自拍。

不幸的是，当我尝试从浏览器中读取此图片时，他告诉我我的图片包含错误。

HTML：

<div class="col">
    <div class="s12 l6">
        <canvas id="canvas" class="photo"></canvas>
    </div>
</div>

JS：

function takePicture() {
    canvas.width = width
    canvas.height = height
    var context = canvas.getContext('2d')
    var icon = new Image()

    icon.src = 'images/icons/cat.png'//FIXME


    icon.onload =  function() {
        context.drawImage(icon, 0, 0, width / 3, height / 3)
    }
    context.drawImage(video, 0, 0, width, height)
    picture = canvas.toDataURL('image/png')
    canvas.addEventListener('click', function(ev) {
        xhr_picture(picture)
        ev.preventDefault()
    })
    return picture
}

JS2：

var xhr = new XMLHttpRequest();

xhr.open('POST', 'http://' + window.location.host + '/photo.php', true)
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
xhr.send(picture);

PHP：

// Store from $_POST to $img, then ->
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$img = base64_decode($img);
file_put_contents('/var/www/html/file.png', $img);

看起来这张图片的格式很好：

file file.png

file.png：PNG图像数据，320 x 240,8位/彩色RGBA，非隔行扫描

有人知道我的错误可能来自哪里？

在服务器上从网络摄像头创建一个png

0 个答案: