Я просто заканчиваю веб-приложение для анализа изображений и рисования. И мне нужна помощь с холстом. Вот что я делаю:
РЕДАКТИРОВАТЬ:
<img id="imgEdit" src="<?php echo $imagename; ?>" border="0"> <canvas id="canvasPaint" width="<?php echo $width; ?>" height="<?php echo $height; ?>"> </canvas> <input type="button" value="Clear" onClick="clearCanvas();" class="button"> <input type="button" value="Save" onClick="saveViaAJAX();" class="button"> <div id="debugFilenameConsole">Wait for a while after clicking the button and the filename of the image will be shown to you. </div> Но теперь у меня проблема с функцией clearCanvas. Потому что браузеры не могут прочитать свойство «ширина». Это мой полный исходный код. Как, пожалуйста, кто-нибудь может сказать, что я делаю неправильно.
РЕДАКТИРОВАТЬ:
function clearCanvas() { var theCanvas = document.getElementById("canvasPaint"); if (theCanvas && theCanvas.getContext) { var ctx = theCanvas.getContext("2d"); if (ctx) { ctx.clearRect(0, 0, <?php echo $width; ?>, <?php echo $height; ?>); var srcImg = document.getElementById("imgEdit"); ctx.drawImage(srcImg, 0,0); clickX = new Array(); clickY = new Array(); clickDrag = new Array(); }}} function saveViaAJAX() { var theCanvas = document.getElementById("canvasPaint"); var canvasData = theCanvas.toDataURL("image/jpg"); var postData = "canvasData="+canvasData; var ajax = new XMLHttpRequest(); ajax.open("POST",'canvasSave.php',true); ajax.setRequestHeader('Content-Type', 'canvas/upload'); ajax.send(postData); }
Мне нужно сохранить холст как изображение jpeg на локальном диске после того, как пользователь нажмет «сохранить изображение». Это означает, что области, которые прозрачны в холсте, становятся черным фоном.
Мне нужно что-то вроде этого: http://img.ruphp.com/php/2w5vhpv.jpg
Вы можете сохранить холст в файл изображения с помощью canvas.toDataUrl('image/jpg') .
Что касается первого вопроса: обычно вы очищаете холст с context.clearRect(0, 0, canvas.width, canvas.height) метода context.clearRect(0, 0, canvas.width, canvas.height) . При этом ваш код должен работать как ожидалось, если объявления canvas и context были сделаны правильно.