为什么我的画布不能上传到服务器?
问题描述:
试图制作一个画布,您可以在其中添加背景,贴纸和文字等内容,然后将其上传到托管画布的服务器上。为什么我的画布不能上传到服务器?
遵循不同的指南和代码,并且除了上传到服务器部分之外,所有的工作都可以工作。
var canvas = new fabric.Canvas('canvas');
document.getElementById('file').addEventListener("change", function(e) {
var file = e.target.files[0];
var reader = new FileReader();
console.log("reader " + reader);
reader.onload = function(f) {
var data = f.target.result;
fabric.Image.fromURL(data, function(img) {
var oImg = img.set({
left: 70,
top: 100,
width: 250,
height: 200,
angle: 0
}).scale(0.9);
canvas.add(oImg).renderAll();
canvas.setActiveObject(oImg);
});
};
reader.readAsDataURL(file);
});
$('#fill').change(function() {
var obj = canvas.getActiveObject();
if (obj) {
obj.setFill($(this).val());
}
canvas.renderAll();
});
$('#font').change(function() {
var obj = canvas.getActiveObject();
if (obj) {
obj.setFontFamily($(this).val());
}
canvas.renderAll();
});
function addText() {
var oText = new fabric.IText('Tap and Type', {
left: 100,
top: 100,
});
canvas.add(oText);
canvas.setActiveObject(oText);
$('#fill, #font').trigger('change');
oText.bringToFront();
}
document.querySelector('#txt').onclick = function(e) {
e.preventDefault();
canvas.deactivateAll().renderAll();
document.querySelector('#preview').src = canvas.toDataURL();
};
canvas.add(new fabric.IText('Tap and Type', {
fontFamily: 'arial black',
left: 100,
top: 100,
}));
function Shirt_Load(img) {
var shirt = img.src;
canvas.setBackgroundImage(shirt, canvas.renderAll.bind(canvas), {
width: 600,
height: 600
});
}
var photo = canvas.toDataURL('image/jpeg');
$.ajax({
method: 'POST',
url: 'photo_upload.php',
data: {
photo: photo
}
});
canvas {
border: 1px solid black;
}
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<input type="file" id="file">
<input type="color" value="blue" id="fill" />
<select id="font">
<option>arial</option>
<option>tahoma</option>
<option>times new roman</option>
</select>
<button onclick="addText()">Add Custom Text</button>
<br />
<canvas id="canvas" width="750" height="550"></canvas>
<a href='' id='txt' target="_blank">Preview</a>
<br />
<img id="preview" />
<button type="submit" formmethod="post" formaction="photo_upload.php">Submit</button>
</form>
<img onclick="Shirt_Load(this);" src="http://www.koffid.nl/pics/bg1.png" width="100" height="100" />
<img onclick="Shirt_Load(this);" src="http://www.koffid.nl/pics/mk.png" width="100" height="100" />
和PHP文件:
<?php
\t
\t $data = $_POST['photo'];
\t list($type, $data) = explode(';', $data);
\t list(, $data) = explode(',', $data);
\t $data = base64_decode($data);
\t mkdir($_SERVER['DOCUMENT_ROOT'] ./photos);
\t file_put_contents($_SERVER['DOCUMENT_ROOT'] ./photos/.time().'.png', $data);
\t die;
?>
任何帮助将EB非常感谢,谢谢!
答
一件事:
var photo = canvas.toDataURL('image/jpeg');
$.ajax({
method: 'POST',
url: 'photo_upload.php',
data: {
photo: photo
}
});
应该是:
var photo = canvas.toDataURL('image/jpeg');
$.ajax({
method: 'POST',
url: 'photo_upload.php',
data: {
'photo': photo
}
});
+0
两者都是相同的。如果后者不是有效的JavaScript标识符([source](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Object_literals)),则仅需要属性名称周围的引号 – hindmost
+0
添加报价没有做任何事情。虽然谢谢! –
和笔:http://codepen.io/drduval/pen/QNqYor –
我建议发送图像为原料POST数据,而不是网址编码POST参数 – hindmost
感谢您的建议!但是我需要一只手握住这里,哪部分代码应该改变? –