javascript - 在 Canvas JQuery 中保存多个图像

Question

我们可以将图像保存在 Canvas 中吗？如中所示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

通常有两种方法从 Canvas 中获取图像:

1. 使用 getImageData() 获取给定 Canvas 矩形的每个像素的 rgba 值。

2. 使用 toDataURL() 获取整个 Canvas 的 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 中的跨源图像。