Question

我有一张图片，我想删除它角落的空白边框。如何在Javascript中修剪图像？将更好的whitout巨大的图书馆。有什么想法吗？

Answer 1

借助“CanvasRenderingContext2D”对象（canvas元素），您可以随意使用图像。只需调整画布大小并使用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); }
});

canvas元素是图像。如果需要图像标记，可以使用toDataURL（）将其切换回来获取src属性。

替换

img.parentNode.replaceChild(canvas, img);

与

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

我认为有必要使用新图像来重新启动onload事件。

如何在Javascript中修剪图像

1 个答案: