本文介绍了html5 canvas toDataURL返回空白图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

以空白画布开始:

<canvas id='myCanvas' width='800' height='600'></canvas>

然后初始化该画布:

  function init_canvas(){
    var canvas = document.getElementById('myCanvas');
    context = canvas.getContext('2d');
    context.lineCap = 'round';
    // fill it with white background
    context.save();
    context.fillStyle = '#fff';
    context.fillRect(0, 0, context.canvas.width, context.canvas.height);
    context.restore();
    return;
  }

然后在画布上做一堆绘图。

Then do a bunch of drawing on the canvas.

然后尝试使用后端的ajax和PHP将其保存到服务器。

Then try to save it to the server using ajax and PHP on the backend.

在客户端:

var img = canvas.toDataURL('image/png');
// strip the leading garbage.
img.substr(img.indexOf(',')+1).toString();

将生成的字符串(base64编码的png)直接转换为PHP和base64_decode ...图像总是正确的大小,但它没有绘图上 - 只是一个透明的图像。这在PHP中似乎不是一个问题base64_decode(),它似乎是一个安全的东西或东西。

Take the resulting string, which is base64 encoded png, directly to PHP and and base64_decode() the string... The image is always the right size, but it has none of the drawing on it - just a transparent image. This doesn't seem to be an issue with base64_decode() in PHP, it seems to be a security thing or something. It fails in both Firefox 4 and the latest Chrome.

使用image / png标头将生成的png图片转换为firefox会在错误控制台中显示:

Dumping the resulting png image to firefox with "image/png" headers yields this in the error console:

Error: Image corrupt or truncated: http://somewhere.com/showimage.php
Source file: http://somewhere.com/showimage.php

但是...图像没有损坏或截断,我可以告诉除非toDataURL()被破坏到处都是因为php东西简单的base64_decode()的结果toDataURL()。

But... The image isn't corrupt or truncated that I can tell unless toDataURL() is broken everywhere because the php stuff simply base64_decode() the result of toDataURL().

任何想法?

谢谢!

推荐答案

您见过 base64_decode ?

<?php
  $encodedData = str_replace(' ','+',$encodedData);
  $decocedData = base64_decode($encodedData);
?>


这篇关于html5 canvas toDataURL返回空白图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

查看更多