在 JQuery 中保存多张图片到画布上。

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');
    });
});

- Imad Alazani

Answer 1

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

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

2. 使用 toDataURL() 获取整个画布的 Base64 字符串。

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

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来避免画布中的跨域图像。

- adeneo

---

据我所知，Imgur已启用跨域资源共享（CORS）。 - rlemon

@rlemon - 他们可能会，但我在控制台中得到了“画布被跨域...污染”的错误，所以我只是用Base64替换了fiddle中的图像？ - adeneo

在画布中+1，我们能否允许气球在画布内任何位置被点击时移动？ - Imad Alazani

你可以将气球移动到任何你喜欢的位置，这只是保存画布上当前的内容，我只是方便地选择使用相同的按钮进行保存。你也可以有另一个按钮，钩入画布上的点击事件，或者任何其他方式。 - adeneo