4

有没有办法可以创建大尺寸但低分辨率的画布。我用语法声明画布 <canvas id="mycanvas" width="700" height="1000"></canvas>。我在 7 英寸平板电脑上运行上述代码，画布横跨画布屏幕的一半。有没有一种方法可以创建一个再次覆盖一半屏幕但分辨率较低（图像质量较低）的画布。实际上，我在画布上画了一些东西，然后使用 canvas.toDataURL() 将其保存为图像。我不需要获得高质量的图像，但我想降低生成的图像的大小。

如果这是一个愚蠢的问题，请原谅我

4

1 回答 1

2

首先，像这样缩放您的画布元素（在 javascript 中）：

    canvas.width=canvas1.width*scaleFactor;
    canvas.height=canvas1.height*scaleFactor;

警告：如果您使用 CSS 缩放画布，您可能会扭曲画布上绘制的图像

然后你可以使用一些添加的参数来缩放你的图像context.drawImage

    var scaleFactor=0.50;

    ctx2.drawImage(img, 0,0,img.width,img.height,
                            0,0,img.width*scaleFactor,img.height*scaleFactor);

在此处输入图像描述

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

<!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:15px;}
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas1=document.getElementById("canvas1");
    var ctx1=canvas1.getContext("2d");
    var canvas2=document.getElementById("canvas2");
    var ctx2=canvas2.getContext("2d");

    var scaleFactor=0.50;

    var img=document.createElement("img");
    img.onload=function(){

        // draw the image full-size on the larger canvas
        ctx1.drawImage(img,0,0);

        // resize the canvas 
        // Don't use css to resize, it will distort your image
        // The scaling is done with the added drawImage arguements
        canvas2.width=canvas1.width*scaleFactor;
        canvas2.height=canvas1.height*scaleFactor;

        // draw a scaled-down image into the second canvas
        ctx2.drawImage(img, 0,0,img.width,img.height,
                            0,0,img.width*scaleFactor,img.height*scaleFactor);

    }
    img.src="faces.png";


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

</head>

<body>
    <p>Top canvas is full-sized</p>
    <canvas id="canvas1" width=400 height=242></canvas><br>
    <p>Bottom canvas is scaled down</p>
    <canvas id="canvas2" width=300 height=300></canvas>
</body>
</html>
于 2013-06-23T15:29:40.097 回答