logo标签列表

如何在Javascript中裁剪一张图片

javascriptimagehtml5-canvastrim
3

我有一张图片，想要去掉它四角的空白边框。如何在Javascript中裁剪一张图片？最好不要用庞大的库。有什么建议吗？

1个回答
1
通过使用“CanvasRenderingContext2D”对象（画布元素），您可以对图像进行任何操作。只需调整画布大小并使用drawImage()方法即可：
function trimImage(img, posX, posY, recWidth, recHeight)
{
    var canvas = document.createElement('canvas');
    canvas.width = recWidth;
    canvas.height = recHeight;
    var context = canvas.getContext('2d');
    context.drawImage(img, -posX, -posY);
    img.parentNode.replaceChild(canvas, img);
}
window.addEventListener("DOMContentLoaded", function()
{
    var img = document.createElement('img');
    img.src = "image.png";
    document.body.appendChild(img);
    img.onload = function() { trimImage(img, 10, 5, img.width - 40, img.height - 80); }
});
< p > canvas元素是一种图片。如果你需要一个图片标签，你可以通过使用 toDataURL() 方法将其转换回来以获取一个 src 属性。

replace

img.parentNode.replaceChild(canvas, img);

使用

var newImg = document.createElement('img');
newImg.src = canvas.toDataURL();
img.parentNode.replaceChild(newImg, img);

我认为需要一张新的图片，以重新触发onload事件。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接