Question

我在网上看到很多关于使用canvas来渲染图像的教程，而不是必须截图，他们可以直接点击并保存为...

我要做的是选择我网页的特定区域转换为图片？它包含HTML元素和图像，从0,0占用600x315。

关键是要取出截屏然后裁剪的步骤，因为我需要一个非常特定的图像尺寸600x315。我希望能够右键单击600x315画布并保存。

这是我到目前为止的代码，但它没有做任何事情......

 var capture = function() {
        var root = document.documentElement;
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var selection = {
            top: 0,
            left: 0,
            width: 600,
            height: 315
        };

        canvas.height = selection.height;
        canvas.width = selection.width;

        context.drawWindow(
            window,
            selection.left,
            selection.top,
            selection.width,
            selection.height,
            'rgb(255, 255, 255)'
        );

        var dataURL = canvas.toDataURL('image/png', '');

        // set canvasImg image src to dataURL
        // so it can be saved as an image
        document.getElementById('canvasImg').src = dataURL;
    };

在我体内，我有这段代码

<canvas id="canvas" width="600" height="315" style="display:none;"></canvas>
<img id="canvasImg" alt="">

你可以使用canvas / javascript将html元素保存到一个元素中，你可以右键单击并保存吗？

0 个答案: