Question

我采取了2个画布，一个是源，另一个是目标。当我将鼠标悬停在画布上的图像上时，它应该在canvas2中放大如何在canvas2中增加图像的高度我想要放大效果。下面是代码。

由于侯赛因

<html>
<body>
<input type="button" onclick="h()">
<p>Image to use:</p>


<p>Canvas:</p>
<canvas id="myCanvas" onmousemove="h()" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<p>Canvas2:</p>
<canvas id="myCanvas2" width="100" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var image = new Image();
image.crossOrigin="anonymous";
image.src="img_the_scream.jpg" 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=image ;
ctx.drawImage(img,0,0);
var d=document.getElementById("myCanvas2");
var ctx1=d.getContext("2d");



function h()
{
var img=ctx.getImageData(event.clientX-80,event.clientY-100,100,100);
ctx1.clearRect ( 0 , 0 , d.width , d.height );
ctx1.putImageData(img,0,0);

//d.width="200";
//d.height="200";
}

</script>

</body>
</html>

Answer 1

您所要做的就是使用toDataUrl和drawImage而不是getImageData和putImageData。例如：

function h() {
    var img=new Image();
    img.src = ctx.toDataUrl();
    img.onload = function() {
        ctx1.drawImage(img,0,0,c.width*horizontalMagnification,c.height*verticalMagnification);
    };
}

或者，您可以在使用putImageData之前调用ctx1.scale(horizontalMagnification,verticalMagnification);。

如何在html中增加画布图像的大小

1 个答案: