4

我们可以将图像保存在画布中吗？如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');
    });
});
4

1 回答 1

3

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

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

  2. 用于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();

如果您需要将气球放在特定的位置，那么移动应该是微不足道的。

这是一个

小提琴

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

于 2013-11-14T23:42:18.890 回答