khi lưu hình ảnh máy chủ phía máy chủ, từ chuỗi dữ liệu base64, nó tạo ra hình ảnh trống

Question

Tôi gặp sự cố khi lưu hình ảnh canvas trong PHP. Tôi nhận được tệp .png trống. Tôi tìm kiếm rất nhiều về vấn đề này nhưng không thể tìm thấy bất cứ điều gì hữu ích về việc này. Tại sao nó lưu hình ảnh trống thay vì hiển thị hình ảnh thực? đang

JavaScript: Mã

html2canvas([document.getElementById('dadycool')], { 
    onrendered: function (canvas) { 
     var data = canvas.toDataURL(); 
     var image = new Image(); 
     image.src = data; 
     document.getElementById('imagec').appendChild(image); 
     console.log(data); 
     $.ajax({ 
    type: "POST", 
    url: "up.php", 
    data: { 
    imgBase64: data 
    } 
}).done(function(o) { 
    console.log('saved'); 
}); 
} 

PHP:

<?php 
// requires php5 
define('localhost/samp/sample2/uploads', 'images/'); 
$img = $_POST['imgBase64']; 
$img = str_replace('data:image/png;base64,', '', $img); 
$img = str_replace(' ', '+', $img); 
$data = base64_decode($img); 
$file = localhost/samp/sample2/uploads . uniqid() . '.png'; 
$success = file_put_contents($file, $data); 
print $success ? $file : 'Unable to save the file.'; 
?> 

Answer 1

Tôi nghi ngờ bạn chưa định cấu hình hộp phát triển của mình để hiển thị thông báo lỗi PHP. Bạn đang xác định một hằng số đó không phải là một định danh hợp lệ:

define('localhost/samp/sample2/uploads', 'images/'); 

Điều đó có nghĩa rằng bạn không thể sử dụng nó trực tiếp:

$file = localhost/samp/sample2/uploads . uniqid() . '.png'; 

... nên được kích hoạt:

Notice: Use of undefined constant localhost - assumed 'localhost' 
Notice: Use of undefined constant samp - assumed 'samp' 
Warning: Division by zero 
Notice: Use of undefined constant sample2 
Warning: Division by zero 
Notice: Use of undefined constant uploads - assumed 'uploads' 
Warning: Division by zero 

. .. và file sẽ chỉ chứa tên tệp cơ sở (ví dụ: 53676a01cdb59.png) nhưng không chứa thành phần đường dẫn. Bạn cần phải sử dụng cú pháp sau:

$file = constant('localhost/samp/sample2/uploads') . uniqid() . '.png'; 

... hoặc, thậm chí tốt hơn, cung cấp cho hằng số một tên hợp lý:

define('DIR_UPLOADS', 'images/'); 

Answer 2

Tôi đã có vấn đề này cùng - nó trông giống như các dữ liệu base64 đã được gửi một cách chính xác nhưng luôn luôn thất bại trong việc tạo ra các phía máy chủ hình ảnh . Giải pháp tôi tìm thấy là sử dụng đối tượng 'FormData' và một yêu cầu xhr rất đơn giản để đăng lên máy chủ.

var url='/path/to/save.php'; 
var data=oCanvas.toDataURL('image/png').replace(/^data:image\/(png|jpg);base64,/, ''); 
var fd=new FormData(); 
fd.append('imgdata',data); 

var request = new XMLHttpRequest(); 
request.open('POST', url); 
request.send(fd); 

Tôi chắc chắn 99% vấn đề là do tiêu đề Loại nội dung không chính xác được gửi bởi yêu cầu xhr. Sử dụng yêu cầu xhr cơ bản được kết hợp với FormData buộc yêu cầu xhr phải được gửi với loại nội dung multipart/formdata có ranh giới nội dung được xác định chính xác.