Question

现在我将整个画布保存为图像并且工作正常但我只想绘制一个rectnagle来将其保存为图像。

我使用下面的代码来保存整个画布

//attempt to save base64 string to server using this var  

var dataUrl = document.getElementById('canvas').toDataURL(); 

var windowContent = '<!DOCTYPE html>';

windowContent += '<html>'

windowContent += '<head><title>Print canvas</title></head>';

windowContent += '<body>'

windowContent += '<a href="' + dataUrl + '" target="_blank"><img src="' + dataUrl + '"></a>';

windowContent += '</body>';

windowContent += '</html>';

var printWin = window.open('','','width=890,height=820');

printWin.document.open();

printWin.document.write(windowContent);

printWin.document.close();

printWin.focus();


//Lets say i made a rectangle -- Just example
context.beginPath();
context.moveTo(x + 32, y + 32);
context.rect(locX+1, locY+1, 26, 26);
context.closePath();
context.fillStyle = color;
context.fill();

Answer 1

“...我只想绘制一个rectnagle来将其保存为图像。”

至少可以通过以下两种方式阅读：

我想在画布上绘制一个矩形并将该矩形转换为图像。
我已在画布上绘制了一个矩形，我想将该矩形保存为图像。

如果在xy = 20,20的画布上已经有26x26 rect + 1px笔画，那么该怎么做＃2。

此代码“剪切”现有画布的现有矩形。

// create a temporary canvas
var tempcanvas=document.createElement("canvas");
var tempctx=tempcanvas.getContext("2d");

// size the tempcanvas to the rect width plus stroke width
tempcanvas.width=28;
tempcanvas.height=28;

// use drawImage to clip the rect from the existing canvas to the tempcanvas
tempctx.drawImage(canvas,19,19,28,28,0,0,28,28);

// save the tempcanvas as an image using toDataURL()
// For example,  use toDataURL as .src to an html img element with id=”clipped”
document.getElementById("clipped").src=tempcanvas.toDataURL();

以下是如何做＃1。

此代码创建一个新的28x28临时画布并在其上绘制一个矩形

// create a temporary canvas
var tempcanvas1=document.createElement("canvas");
var tempctx1=tempcanvas1.getContext("2d");

// size the tempcanvas to the rect width plus stroke width
tempcanvas1.width=28;
tempcanvas1.height=28;

// draw a rect on the temp canvas
tempctx1.beginPath();
tempctx1.rect(0,0,26,26);
tempctx1.fillStyle="orange";
tempctx1.strokeStyle="lightgray";
tempctx1.fill();
tempctx1.lineWidth=1;
tempctx1.stroke();

// save the tempcanvas as an image using toDataURL()
// For example,  use toDataURL as .src to an html img element with id=”drawn”
document.getElementById("drawn").src=tempcanvas.toDataURL();

这是代码和小提琴：http://jsfiddle.net/m1erickson/KrNJ7/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:20px; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

// draw a rect on a canvas 
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.rect(20,20,26,26);
ctx.fillStyle="orange";
ctx.strokeStyle="blue";
ctx.fill();
ctx.lineWidth=1;
ctx.stroke();

// clip the rect out of the canvas and save as an image
var tempcanvas=document.createElement("canvas");
var tempctx=tempcanvas.getContext("2d");
tempcanvas.width=28;
tempcanvas.height=28;
tempctx.drawImage(canvas,19,19,28,28,0,0,28,28);
document.getElementById("clipped").src=tempcanvas.toDataURL();

// create a new rect on a temp canvas and save as an image
var tempcanvas1=document.createElement("canvas");
var tempctx1=tempcanvas1.getContext("2d");
tempctx1.beginPath();
tempctx1.rect(0,0,26,26);
tempctx1.fillStyle="orange";
tempctx1.strokeStyle="lightgray";
tempctx1.fill();
tempctx1.lineWidth=1;
tempctx1.stroke();
document.getElementById("drawn").src=tempcanvas.toDataURL();


}); // end $(function(){});
</script>

</head>

<body>
    <p>A rect predrawn on a canvas</p>
    <canvas id="canvas" width=50 height=50></canvas>
    <p>An image of just the rect clipped from the canvas above</p>
    <img id="clipped" width=28 height=28>
    <p>An image of just a rect created on a temp canvas</p>
    <img id="drawn" width=26 height=26>
</body>
</html>

我们可以在画布上只获得一个对象吗？

1 个答案: