如何将html5画布保存到服务器 [英] how to save html5 canvas to server
问题描述
我加载几个图像到我的画布，然后加载后，我想点击一个按钮，将该画布图像保存到我的服务器。我可以看到脚本工作正常，直到它到达'toDataURL'部分，我的功能停止执行。我做错了什么？这是我的代码：
Im loading a few images to my canvas and then after they load I want to click a button that saves that canvas image to my server. I can see the script works fine until it gets to the 'toDataURL' part and my function stops executing. What am I doing wrong? Here is my code:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578"
height="200"></canvas>
<div>
<button onClick="saveCards();">Save</button>
</div>
<script>
function loadImages(sources, callback)
{
var images = {};
var loadedImages = 0;
var numImages = 0;
// get num of sources
for(var src in sources) {
numImages++;
}
for(var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages)
{
callback(images);
}
};
images[src].src = sources[src];
}
}
var canvas =
document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var sources = {
great:
'images/great.jpg',
star:
'images/1Star.jpg', good:
'images/good.jpg'
};
loadImages(sources, function(images) {
context.drawImage(images.great,
0, 0, 80, 120);
context.drawImage(images.star, 80,
0, 80, 120);
context.drawImage(images.good, 160, 0, 80,
120);
});
</script>
<script type="text/javascript">
function saveCards()
{
var canvas=
document.getElementById("myCanvas");
alert("stops");
var theString= canvas.toDataURL();
var postData= "CanvasData="+theString;
var ajax= new XMLHttpRequest();
ajax.open("POST", 'saveCards.php', true);
ajax.setRequestHeader('Content-Type',
'canvas/upload');
ajax.onreadystatechange=function()
{
if(ajax.readyState == 4)
{
alert("image was saved");
}else{
alert("image was not saved");
}
}
ajax.send(postData);
}
</script>
</body>
</html>
感谢您的帮助是因为图像在调用toDataUrl之前没有加载？如果是这样，你可以帮我修复它。
Thank you for any help is it because the images are not loaded before toDataUrl is called? If so can you please help me fix it.
这是php脚本：
<?php
if(isset($GLOBALS['HTTP_RAW_POST_DATA']));
{
$rawImage=$GLOBALS['HTTP_RAW_POST_DATA'];
$removeHeaders=
substr($rawImage,strpos($rawImage, ",")+1);
$decode=base64_decode($removeHeaders);
$fopen= fopen('images/image.png', 'wb');
fwrite($fopen, $decode);
fclose($fopen);
}
?>
我遇到了安全错误。
推荐答案
在 canvas元素的规范，它声明：
如果来自一个源的脚本可以访问
信息（例如读取像素）来自另一个来源的图像（一个
是不一样的）。
Information leakage can occur if scripts from one origin can access information (e.g. read pixels) from images from another origin (one that isn't the same).
为了缓解这一点，与canvas元素定义为
有一个标志，表示它们是否为源清除。所有位图
以其origin-clean设置为true开始。
To mitigate this, bitmaps used with canvas elements are defined to have a flag indicating whether they are origin-clean. All bitmaps start with their origin-clean set to true. The flag is set to false when cross-origin images or fonts are used.
使用toDataURL（），toDataURLHD（），toBlob（），getImageData（）函数将标志设置为false
。 ）和
getImageDataHD（）方法检查该标志，并将抛出一个SecurityError
异常而不是泄漏跨源数据。
The toDataURL(), toDataURLHD(), toBlob(), getImageData(), and getImageDataHD() methods check the flag and will throw a SecurityError exception rather than leak cross-origin data.
在某些情况下重置;例如，当
CanvasRenderingContext2D绑定到一个新的画布时，位图被
清除并且其标志复位。
The flag can be reset in certain situations; for example, when a CanvasRenderingContext2D is bound to a new canvas, the bitmap is cleared and its flag reset.
由于您要将不同服务器的图片加载到canvas元素中，因此能够使用toDataURL（）的解决方法是将画布复制到一个新的画布元素中，将origin-clean标记重置为真正。
Since you are loading images from a different server into a canvas element, the work-around to be able to use toDataURL() is to "copy" the canvas into a new canvas element to reset the origin-clean flag to "true".
您可以看到此示例此处
这篇关于如何将html5画布保存到服务器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
