canvas drawimage在具有CSS高度和寬度的圖像上無法正常工作

Question

我試圖用畫布寫一個圖像放大鏡，它工作正常，但是問題是當我將鼠標懸停在圖像上時，基於圖像上的鼠標位置，畫布上繪制的圖像未正確定位。

你可以在這里看到問題

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Magnifier</title>

<style type="text/css">
canvas
{
    border:1px solid #000;
    width:150px;
    height:150px;
    border-radius:80px;
    position:absolute;
}
</style>
</head>
<body>
<img src="natural.jpg" height="400" id="image" width="600" onMouseMove="move(event);">
<canvas id="magnifier"></canvas>
<input type="button" name="magnify" id="magnify" value="magnify" onClick="magnify()" />
</body>
</html>
<script type="text/javascript">
var flag = 0;
var lens = document.getElementById('magnifier');
var img = document.getElementById('image');
var ctx=lens.getContext("2d");
function magnify()
{
    flag = 1;
}
function move(e)
{
    if(flag == 1)
    {
        var co_ord = getImageCoords(e,img);

        var x = co_ord['x']+img.offsetLeft;
        var y = co_ord['y']+img.offsetTop;
        draw(x,y);
        /*lens.style.top = y+"px";
        lens.style.left = x+"px";*/

    }
}
 function getImageCoords(event,img) {
        var cords = new Array;
        cords['x'] = event.offsetX?(event.offsetX):event.pageX-img.offsetLeft;
        cords['y'] = event.offsetY?(event.offsetY):event.pageY-img.offsetTop;
        return cords;
    }
    function draw(a,b)
    {
    ctx.clearRect(0,0,lens.width,lens.height);
    ctx.drawImage(img,a,b,150,150,0,0,300,150);
    }
</script>

Answer 1

主要問題是您要通過將原始圖像強制為640 x 400 img元素來縮放原始圖像。 實際圖像要大得多。 寬度和高度只是演示設置，因此當您繪制圖像時ctx.drawImage(img,a,b,150,150,0,0,300,150); 它正在繪制原始的未縮放圖像。 這意味着您的鼠標坐標與原始圖像上的位置不匹配。

我可以看到兩個選項：

1.通過繪畫到畫布來調整原件的大小

在這里查看更新。 我以前沒有使用過cssdeck，所以這里是一個小提琴 ，以防萬一我沒有正確保存它。 基本上，它將圖像調整為畫布大小（resizeCanvas），然后將此畫布用於繪圖：

相關HTML：

<canvas id='resizeCanvas' height='400' width='600' onMouseMove="move(event);"></canvas>

相關JavaScript：

var ctxR=resizeCanvas.getContext("2d");
ctxR.drawImage(theImg,0,0,600,400);

我還有其他一些調整。 首先，您應該直接在放大鏡畫布上指定width和height屬性。 否則，如果這與CSS不同，則將導致縮放。 然后，您可以縮放以將大小增加一倍，方法是：

ctx.drawImage(img,a,b,150,150,0,0,300,300);

這種方法的唯一缺點是您上傳的是高分辨率圖像，然后放大后失去一些質量，這似乎很可惜。 因此，更好的方法可能是在不添加dom的情況下加載原始圖像，然后為原始圖像適當地轉換x，y坐標。 第二種方法是：

2.縮放x，y坐標（更好的質量）

請參閱更新這里（小提琴這里也一樣）。 如您所見，質量要好得多。

在這里，我們加載原始圖像：

var origImage = document.createElement('img');
var origImage.src = '<image source>'

然后，相應地縮放：

scaleX = origImage.width/img.width;
scaleY = origImage.height/img.height;
    ctx.clearRect(0,0,lens.width,lens.height);
    ctx.drawImage(img,a*scaleX,b*scaleY,150,150,0,0,150,150);

請注意，當我們將原始圖像繪制到畫布上時，實際上並沒有對它進行任何尺寸調整（在所有情況下，寬度和高度均為150），而只是將其顯示為更大的原始尺寸。 對於較小的圖像，您可能需要根據一些軟糖因素調整大小。

canvas drawimage在具有CSS高度和寬度的圖像上無法正常工作

問題描述

1 個解決方案

解決方案1
1 已采納 2014-05-19 12:52:17

canvas drawimage在具有CSS高度和寬度的圖像上無法正常工作

問題描述

1 個解決方案

解決方案1 1 已采納 2014-05-19 12:52:17

解決方案1
1 已采納 2014-05-19 12:52:17