javascript - 如何将 Canvas 图像保存到服务器

标签 javascript php html canvas

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

我的代码

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'); 

         }); 
        }

我的 PHP 代码

    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>';

最佳答案

嘿@mimi也许最好将base-64形式的图像作为字符串上传并在服务器端将其转换为PNG。 但您仍然可以从客户端上传图像,但我更喜欢上传它的 base-64 形式。

关于javascript - 如何将 Canvas 图像保存到服务器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23440271/

相关文章:

java - 如何结合JAVA代码和HTML?

html - vcard_name 属性如何工作 re : input fields?

javascript - 如何限制Fabricjs中自由绘制圆?

javascript - 从 Docker 内部调试 Node.js 应用程序

php - 在 PHP 中创建一种获取所需值的简单方法?

php - 每个字符的多对多查询未加载 - 如何让它显示/编辑/添加?

javascript - 如何在sql脚本中为表行设置类属性

javascript - 检测 ES6 中的循环依赖

javascript - 扩展 DOM 而不是元素原型(prototype)......可能吗?

php - Doctrine 中的多个 ManyToOne 关系