如何将画布图像保存到服务器

问题描述:

I know there is a lot of questions regarding this but currently I am trying to save canvas image to server, I recently start javascript so I meet lots of problem. I write image editor which allow user to save the canvas as an image file to server after editing is finished. but because image produce with dynamic src in canvas I cant save it with php. can any one help me with this problem??

my code

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

         }); 
        }

my php code

    echo '<div class="wifix">';
    echo '<div class="dadycool" id="dadycool">';
    echo '<div class="fixx" align="center"><img class="ui-widget-content"  id="resizable" src="uploads/'.$ThumbPrefix.$NewImageName.'" alt="Thumbnail">';
    echo '</div>';
    echo '</div>';
    echo '</div>';
    echo '<div id="imagec"></div>';

我知道有很多关于此的问题,但目前我正在尝试将画布图像保存到服务器,我最近 启动javascript所以我遇到了很多问题。 我写了图像编辑器,允许用户在编辑完成后将画布作为图像文件保存到服务器。 但是因为图像在画布中用动态src生成我不能用php保存它。 ncan任何人帮我解决这个问题? p>

我的代码 p>

  html2canvas([document.getElementById('dadycool')],{
 onrendered:function(canvas){  
 var data = canvas.toDataURL('image / png'); 
 var image = new Image(); 
 image.src ='data:image / jpeg; base64,“”'; 
 document.getElementById  ('imagec')。appendChild(image); 
 $ .ajax({
 type:“POST”,
 url:“resize.php”,
 data:{
 imgBase64:dataURL 
} \  n})。done(function(o){
 console.log('saved'); 
 
}); 
} 
  code>  pre> 
 
 

我的PHP代码 strong> p>

  echo'&lt; div class =“wifix”&gt;'; 
 echo'&lt; div class =“dadycool”id  =“dadycool”&gt;'; 
 echo'&lt; div class =“fixx”align =“center”&gt;&lt; img class =“ui-widget-content”id =“resizable”src =“uploads /'  。$ ThumbPrefix。$ NewImageName。'“alt =”缩略图“&gt;'; 
 echo'&lt; / div&gt;'; 
 echo'&lt; / div&gt;'; 
 echo'&lt; / div&gt;'  ; 
 echo'&lt; div id =“image  c“&gt;&lt; / div&gt;'; 
  code>  pre> 
  div>

hey @mimi maybe it's better you upload base-64 form of the image as string and convert it to PNG on server-side. but still you can upload the image from client-side but i prefer to upload base-64 form of it.