[英]clear Canvas and save Canvas
我正在完成用於圖片分析和修復的Web應用程序。 我需要帆布方面的幫助。 這是我的工作:
編輯:
<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 : //i48.tinypic.com/2w5vhpv.jpg
您可以使用canvas.toDataUrl('image/jpg')
將畫布保存到圖像文件中。
關於第一個問題:通常,您可以使用context.clearRect(0, 0, canvas.width, canvas.height)
方法清除畫布。 話雖如此,如果正確進行了畫布和上下文聲明,則您的代碼應該可以按預期工作。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.