使用 Webrtc 在画布之间传递图像答案

【问题标题】：Pass image between canvas with Webrtc使用 Webrtc 在画布之间传递图像
【发布时间】：2015-06-18 18:52:16
【问题描述】：

我发现了一个类似的问题，但它似乎没有回答我的问题。我有一个 HTML5 画布，我将 pubnub 与 webrtc 一起使用。我想要做的是在画布之间传递我的图像，就像这里的数据通过http://pubnub.github.io/codoodler/history.html 一样。有任何想法吗？（如果可能，请在答案中添加示例）

! function() {
    function a(a) {
        q.publish({
            channel: 'mychannel12',
            message: a
        })
    }

    function b(a, b) {
        h.strokeStyle = a, h.beginPath(), h.moveTo(b[0].x, b[0].y);
        for (var c = 1; c < b.length; c++) h.lineTo(b[c].x, b[c].y);
        h.stroke()
    }

    function c(a) {
        !a || a.plots.length < 1 || b(a.color, a.plots)
    }

    function d(a) {
        if (a.preventDefault(), r) {
            var c = j ? a.targetTouches[0].pageX - g.offsetLeft : a.offsetX || a.layerX - g.offsetLeft,
                d = j ? a.targetTouches[0].pageY - g.offsetTop : a.offsetY || a.layerY - g.offsetTop;
            s.push({
                x: c << 0,
                y: d << 0
            }), b(i, s)
        }
    }

    function e(a) {
        a.preventDefault(), r = !0
    }

    function f(b) {
        b.preventDefault(), r = !1, a({
            color: i,
            plots: s
        }), s = []
    }
    var g = document.getElementById("drawCanvas"),
        h = g.getContext("2d"),
        i = document.querySelector(":checked").getAttribute("data-color");
    g.width = Math.min(document.documentElement.clientWidth, window.innerWidth || 300), g.height = Math.min(document.documentElement.clientHeight, window.innerHeight || 300), h.strokeStyle = i, h.lineWidth = "3", h.lineCap = h.lineJoin = "round", document.getElementById("colorSwatch").addEventListener("click", function() {
        i = document.querySelector(":checked").getAttribute("data-color")
    }, !1);
    var j = "ontouchstart" in window,
        k = navigator.pointerEnabled,
        l = navigator.msPointerEnabled,
        m = j ? "touchstart" : k ? "pointerdown" : l ? "MSPointerDown" : "mousedown",
        n = j ? "touchmove" : k ? "pointermove" : l ? "MSPointerMove" : "mousemove",
        o = j ? "touchend" : k ? "pointerup" : l ? "MSPointerUp" : "mouseup";
    g.addEventListener(m, e, !1), g.addEventListener(n, d, !1), g.addEventListener(o, f, !1);
    var p = "draw",
        q = PUBNUB.init({
            publish_key: "pub-c-465c4b3b-0b7d-40de-86c5-10a9433058b5",
            subscribe_key: "sub-c-43a257e0-d94a-11e4-a2b8-0619f8945a4f",
            leave_on_unload: !0
        });
    q.subscribe({
        channel: 'mychannel12',
        callback: c,
        presence: function(a) {
            a.occupancy > 1 && (document.getElementById("unit").textContent = "doodlers"), document.getElementById("occupancy").textContent = a.occupancy;
            var b = document.getElementById("occupancy").parentNode;
            b.classList.add("anim"), b.addEventListener("transitionend", function() {
                b.classList.remove("anim")
            }, !1)
        }
    }), drawHistory && q.history({
        channel: 'mychannel12',
        count: 50,
        callback: function(a) {
            q.each(a[0], c)
        }
    });
    var r = !1,
        s = []
}();

【问题讨论】：

欢迎来到 SO。请向我们提供您迄今为止尝试过的代码，具体是什么以及哪里出错了。
你可以使用webrtc的RTCDataChannel和canvas.toDataURL来获取要传递的数据，一定要对数据进行stringify/de-stringify。
您好，感谢您的快速回答。我一直在使用上面的代码从一个画布绘制到另一个画布，但我还不太熟悉它（我已经从 pubnub 中获取它）。

标签： html canvas webrtc pubnub

【解决方案1】：

您可以发布/订阅 (x, y) 中的画布坐标数据，就像代码示例一样，或者传递图像的 url/路径，但不传递图像本身。

您可以使用 PubNub API publish 的每个数据的大小小于 32k，因此直接使用 PubNub 传递图像并不是一种理想的方式，即使您使用 canvas.toDataURL 将画布图像转换为 base64 也是如此。还是太大了。

您可能希望将画布图像数据发送到其他地方，例如 Parse，然后传递 url。

【讨论】：