Question

我们可以在画布中保存图像吗？如 JSFiddle 。

中所示

我想以这样的方式保存图像，气球应该越过图像

$(document).ready(function() {
    var d_canvas = document.getElementById('canvas');
    var context = d_canvas.getContext('2d');
    var background = document.getElementById('background');
    var ballon = document.getElementById('ballon')
    context.drawImage(background, 0, 0);

    $('#ballon').draggable();

    $('#draw').click(function() {
        var $ballon = $('#ballon'),
            $canvas = $('#canvas');
        var ballon_x = $ballon.offset().left - $canvas.offset().left,
            ballon_y = $ballon.offset().top - $canvas.offset().top;

        context.drawImage(ballon, ballon_x, ballon_y);

        $ballon.hide();
        $(this).attr('disabled', 'disabled');
    });
});

Answer 1

通常有两种方法可以从画布中获取图像：

使用getImageData()获取画布给定矩形的每个像素的rgba值。
使用toDataURL()获取整个画布的Base64字符串。

第二种方法可能最有用，并结合一些HTML5魔法和下载属性，我们可以创建可下载的图像或将字符串发送到服务器并将其保存为图像：

var base64 = d_canvas.toDataURL("image/png");

var a = document.createElement('a');

a.href        = base64,
a.target      = '_blank';
a.download    = 'myImage.png';

document.body.appendChild(a);
a.click();

如果你需要将气球放在特定的地方，移动它应该是微不足道的。

这是一个

FIDDLE

请注意，我必须删除外部图像并使用base64来避免画布中的跨源图像。

在canvas JQuery中保存多个图像

1 个答案: