我想使用 php 和 jquery ajax 将 html canvas 元素保存为图像。 这是我的 ajax 代码。
var front_image=canvas.toDataURL("image/png");
//front image is a base_64 string
$.ajax({
url:base_url+'tabs/profile/save_front_image',
type:'POST',
data:'front_image='+front_image,
success:function(response){
}
});
我只是在 php echo $_POST['front_image']
中执行 echo
,因此请求和响应是相同的。
当我在ajax之前使用此代码时,它将图像加载到浏览器的新选项卡
var w = window.open('about:blank', 'image from canvas');
w.document.write("<img src='" + frame_image + "' alt='from canvas'/>");
但是当我将相同的代码放在 ajax 响应上时,如下所示,它不起作用。浏览器中仅打开一个空白选项卡。所以我无法将图像保存为文件。
var w = window.open('about:blank', 'image from canvas');
w.document.write("<img src='" + response + "' alt='from canvas'/>");
我还比较了frame_image
和response
的字符串长度。他们是一样的。我不确定为什么图像没有响应加载。请建议我答案,谢谢。
最佳答案
// soon you can use front_image=canvas.toBlob("image/png")
// construct a blob
function b64toBlob(b64Data, contentType, sliceSize) {
contentType = contentType || '';
sliceSize = sliceSize || 512;
var byteCharacters = atob(b64Data);
var byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);
var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
var blob = new Blob(byteArrays, {type: contentType});
return blob;
}
// make an actually file from the base64 so we can send binary data
var blob = b64toBlob(front_image.split(",")[1], "image/png")
var fd = new FormData();
fd.append("file", blob, "filename.png");
$.ajax({
url: 'http://example.com/script.php',
data: fd,
processData: false,
contentType: false,
type: 'POST',
success: function(data){
alert(data);
}
});
//保存
<?php
$uploads_dir = '/uploads';
foreach ($_FILES["file"]["error"] as $key => $error) {
if ($error == UPLOAD_ERR_OK) {
$tmp_name = $_FILES["file"]["tmp_name"][$key];
$name = $_FILES["file"]["name"][$key];
move_uploaded_file($tmp_name, "$uploads_dir/$name");
}
}
?>
关于javascript - 如何使用php和ajax将Canvas元素保存到png文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20682255/