问题描述
以空白画布开始:
<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返回空白图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!