如何将html5 canvas保存到服务器
[英]how to save html5 canvas to server
问题描述
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. 我可以看到脚本运行良好，直到到达“ toDataURL”部分并且函数停止执行。 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>
Thank you for any help is it because the images are not loaded before toDataUrl is called? 谢谢您的帮助，因为在调用toDataUrl之前未加载图像？ If so can you please help me fix it. 如果可以，请您帮我解决。
This is the php script: 这是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);
}
?>
I am getting a security error though. 我虽然遇到安全错误。
2 个解决方案
解决方案1
1 已采纳 2013-11-22 02:08:31
In the specification for the canvas element it states: 在canvas元素的规范中，它指出：
Information leakage can occur if scripts from one origin can access information (eg read pixels) from images from another origin (one that isn't the same).
To mitigate this, bitmaps used with canvas elements are defined to have a flag indicating whether they are origin-clean.
The toDataURL(), toDataURLHD(), toBlob(), getImageData(), and getImageDataHD() methods check the flag and will throw a SecurityError exception rather than leak cross-origin data.
The flag can be reset in certain situations;
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". 由于要将图像从其他服务器加载到canvas元素中，因此能够使用toDataURL（）的变通办法是将画布“复制”到新的canvas元素中，以将origin-clean标志重置为“ true”。
解决方案2
0 2013-11-22 03:30:23
I figured what I did wrong, but not really sure why it works now. 我发现我做错了什么，但不确定为什么现在可以工作。 In my actual code that I am using instead of images/image.png I was using the full url https://www.mywebsite.com/images/image.png For some reason when I just write the shortened images/image.png . 在我使用的实际代码中，我使用的是完整网址https://www.mywebsite.com/images/image.png，而不是images / image.png出于某种原因，我只写了缩短的images / image.png 。 It works fine. 工作正常。 Thank you for all the help debugging and for your alternative solutions. 感谢您提供的所有调试帮助和替代解决方案。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.