doujian7132 2017-04-12 18:36
浏览 247

Base64图像解码问题 - 空.png文件?

I'm trying to get a .png image from <canvas> element generated basing on html code.

The javascript i'm using is:

function canvityo() {
        html2canvas(document.body, {
            onrendered: function(canvas) {
            document.body.appendChild( canvas );
            var dataURL = canvas.toDataURL();

          type: "POST",
          url: "imgprocess.php",
          data: { 
             imgBase64: dataURL
        }).done(function(o) {

I have html2canvas library linked, it creates good <canvas> (can see them since I used appendChild), and now I'd like to convert those <canvas> into photo.png file, to be able to either save it on server, or INSERT INTO as blob to my `database table.

var dataURL = canvas.toDataURL();

to this point it seems everything is working fine (I can manage to get this url, which appears to be hella long). Because of strange look i'm pretty much sure i'd need to use base64 decoding to retrieve it as image file.

My imgprocess.php looks like that:


$img = $_POST['data'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$fileData = base64_decode($img);
$fileName = 'photo.png';
file_put_contents($fileName, $fileData);


It does output photo.png file, but the file is empty and as I'm not very experienced I've been struggling to find cause of this issue.

Maybe you guys could help me deal with this problem?

  • 写回答

1条回答 默认 最新

  • duande3134 2017-04-12 18:43

    It should be $img = $_POST['imgBase64']; not $img = $_POST['data']; as your data object's key name is imgBase64 when sending the ajax post request.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?



  • ¥30 vivado2017.4的sdk打不开
  • ¥50 matlab,文献复现
  • ¥20 寻找Flink CDC指导,有偿咨询
  • ¥15 cruise如何仿真不同温度下车辆的经济性?
  • ¥20 扑克牌游戏的完整代码
  • ¥88 求帮安装Python架构的vnpy
  • ¥20 逻辑回归法分析品牌知名度和购买意向
  • ¥15 华为云主机-异常连接
  • ¥50 vue 成绩列表 输入成绩,并统计各分数段人数
  • ¥20 请教怎么绕过这个卡密系统 大家交流一下