如何使用php和ajax将Canvas元素保存到png文件?

我想使用php和jquery ajax将html canvas元素保存为图像。
这是我的ajax代码 。</ p>

  var front_image = canvas.toDataURL(“image / png”); 
//前图像是base_64字符串
$ .ajax({
url: base_url +'tabs / profile / save_front_image',
type:'POST',
data:'front_image ='+ front_image,
success:function(response){

}
}); \ n </ code> </ pre>

我只是在php echo $ _POST ['front_image'] </ code>中执行 echo </ code>所以请求和响应是 当我在ajax之前使用此代码时,它将图像加载到浏览器的新选项卡</ p>

  var w = window.open('  about:blank','canvas from canvas'); 
w.document.write(“&lt; img src ='”+ frame_image +“'alt ='from canvas'/&gt;”);
</ code > </ pre>

但是当我在ajax响应上放置相同的代码时,它不起作用。 浏览器中只打开一个空白选项卡。 所以我无法将图像保存为文件。</ p>

  var w = window.open('about:blank','canvas from canvas'); 
w.document .write(“&lt; img src ='”+ response +“'alt ='from canvas'/&gt;”);
</ code> </ pre>

我比较了字符串长度 frame_image </ code>和 response </ code>也是。 他们是一样的。 我不确定为什么图像没有加载响应。 请建议我回答谢谢。</ p>
</ div>

展开原文

原文

I want to save a html canvas element as an image using php and jquery ajax. Here is my code for 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){


                  }
              });

I m just doing echo in php echo $_POST['front_image'] so request and response are same.

When i use this code before ajax it loads image to new tab of browser

 var w = window.open('about:blank', 'image from canvas');
   w.document.write("<img src='" + frame_image + "' alt='from canvas'/>");

but when i put the same code on ajax response as bellow it doesn't work. Only a blank tab opens in browser. So i m not being able to save image as file.

var w = window.open('about:blank', 'image from canvas');
 w.document.write("<img src='" + response + "' alt='from canvas'/>");

I compared string length of frame_image and response also. They are same. I m not sure why image is not loading in response. Please suggest me the answer thanks.

1个回答



  //很快就可以使用front_image = canvas.toBlob(“image / png”)

//构造 blob
function b64toBlob(b64Data,contentType,sliceSize){
contentType = contentType || '';
sliceSize = sliceSize || 512;

var byteCharacters = atob(b64Data);
var byteArrays = [];

for(var offset = 0; offset&lt; byteCharacters.length; offset + = sliceSize){
var slice = byteCharacters.slice(offset,offset + sliceSize);

var byteNumbers = new Array(slice.length);
for(var i = 0; i&lt; slice.length; i ++){
byteNumbers [ i] = slice.charCodeAt(i);
}

var byteArray = new Uint8Array(byteNumbers);

byteArrays.push(byteArray);
}

var blob = new Blob( byteArrays,{type:contentType});
返回blob;
}

//从base64创建一个实际文件,这样我们就可以发送二进制数据
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);
}
});
</ code> </ pre>

//保存</ p>

 &lt;?php 
$ uploads_dir ='/ uploads';
foreach($ _FILES [“file” ] [“error”] as $ key =&gt; $ 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”);
}
}
?&gt;
</ code> </ pre>
</ DIV>

展开原文

原文

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

// The saving

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

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐