将图像数据缩放到更大的尺寸答案

【问题标题】：Scaling Image Data to Bigger Size将图像数据缩放到更大的尺寸
【发布时间】：2013-04-13 06:29:27
【问题描述】：

首先我有一个画布区域，

我从它的图像数据中裁剪了一些部分，然后我想显示裁剪的部分拉伸到完整的画布比例。

喜欢。

我有一块面积为 400,400 的画布，

然后我将图像数据从 (20,100) 裁剪到 (200,300)，这意味着 180（宽度）和 200（高度）

然后我希望将裁剪的部分显示在拉伸到其全宽和全高的同一画布上。

是否可以通过 javascript 部分实现，或者我们是否需要为此创建自己的函数。

【问题讨论】：

标签： html5-canvas

【解决方案1】：

您可以使用 toDataURL 将当前画布捕获为 URL

var dataURL=canvas.toDataURL();

然后您可以使用 drawImage 裁剪和缩放图像并将其粘贴回画布

context.drawImage(theImage,CropatX,CropatY,WidthToCrop,HeightToCrop,
        pasteatX,pastatY,scaledWidth,scaledHeight)

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

<!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 black;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    ctx.beginPath();
    ctx.fillStyle="green";
    ctx.strokeStyle="blue";
    ctx.lineWidth=10;
    ctx.arc(125,100,65,0,2*Math.PI,false);
    ctx.fill();
    ctx.stroke();
    ctx.beginPath();
    ctx.fillStyle="purple";
    ctx.strokeStyle="yellow";
    ctx.rect(100,0,50,300);
    ctx.fill();
    ctx.stroke();
    ctx.beginPath();
    ctx.strokeStyle="red";
    ctx.lineWidth=3;
    ctx.rect(20,100,180,200);
    ctx.stroke();


    // 
    $("#crop").click(function(){
        // save the current canvas as an imageURL
        var dataURL=canvas.toDataURL();
        // clear the canvas
        ctx.clearRect(0,0,canvas.width,canvas.height);
        // create a new image object using the canvas dataURL
        var img=new Image();
        img.onload=function(){
            // fill the canvas with the cropped and scaled image
            // drawImage takes these parameters
            // img is the image to draw on the canvas
            // 20,100 are the XY of where to start cropping
            // 180,200 are the width,height to be cropped
            // 0,0 are the canvas coordinates where the
            //        cropped image will start to draw
            // canvas.width,canvas.height are the scaled
            //        width/height to be drawn
            ctx.drawImage(img,20,100,180,200,0,0,canvas.width,canvas.height);
        }
        img.src=dataURL;
    });

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

</head>

<body>
    <p>Red rectangle indicates cropping area</p>
    <canvas id="canvas" width=300 height=300></canvas><br/>
    <button id="crop">Crop the red area and scale it to fill the canvas</button>
</body>
</html>

【讨论】：

非常感谢，我不知道为什么我想不到。