Html5 canvas 将图像数据缩放到更大的大小_Html5 Canvas

Html5 canvas 将图像数据缩放到更大的大小

html5-canvas

Html5 canvas 将图像数据缩放到更大的大小,html5-canvas,Html5 Canvas,首先我有一个画布区域我从它的图像数据中裁剪了一些部分，然后我想显示被裁剪的部分拉伸到了整个画布的比例喜欢我有一张面积为400400的画布然后我将图像数据从（20100）裁剪到（200300），即180（宽度）和200（高度）之后，我希望裁剪的部分显示在同一画布上，拉伸到其全宽和全高是否可以通过javascript部分实现，或者我们是否需要为此创建自己的函数。您可以使用toDataURL将当前画布捕获为URL var dataURL=canvas.toDataURL(); 然后可以使

首先我有一个画布区域

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

喜欢

我有一张面积为400400的画布

然后我将图像数据从（20100）裁剪到（200300），即180（宽度）和200（高度）

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

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

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

var dataURL=canvas.toDataURL();

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

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

下面是代码和小提琴：


正文{背景色：象牙色；填充：20px；}
画布{边框：1px纯黑；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
ctx.beginPath（）；
ctx.fillStyle=“绿色”；
ctx.strokeStyle=“蓝色”；
ctx.线宽=10；
ctx.arc（125100,65,0,2*Math.PI，假）；
ctx.fill（）；
ctx.stroke（）；
ctx.beginPath（）；
ctx.fillStyle=“紫色”；
ctx.strokeStyle=“黄色”；
ctx.rect（100,0,50300）；
ctx.fill（）；
ctx.stroke（）；
ctx.beginPath（）；
ctx.strokeStyle=“红色”；
ctx.线宽=3；
ctx.rect（20100180200）；
ctx.stroke（）；
// 
$（“#裁剪”）。单击（函数（）{
//将当前画布另存为imageURL
var dataURL=canvas.toDataURL（）；
//清理画布
clearRect（0,0，canvas.width，canvas.height）；
//使用画布数据URL创建新的图像对象
var img=新图像（）；
img.onload=函数（）{
//用裁剪和缩放的图像填充画布
//drawImage接受这些参数
//img是要在画布上绘制的图像
//20100是开始修剪的XY
//180200是要裁剪的宽度、高度
//0,0是画布坐标，其中
//裁剪后的图像将开始绘制
//canvas.width、canvas.height是按比例缩放的
//待绘制的宽度/高度
ctx.drawImage（img，20100180200,0,0，画布宽度，画布高度）；
}
src=dataURL；
});
}); // end$（函数（）{}）；
红色矩形表示裁剪区域


裁剪红色区域并缩放以填充画布

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

<!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>