相关疑难解决方法(0)

我的应用程序的一部分包括使用标准的2d上下文画布和webGL的混合的html5照片编辑.

无论如何,当用户操纵他们的照片时,我正在保存"撤消"状态.这些都作为base64图像数据存储在Javascript对象中.

一切都很好,性能也很好.

但是我想知道从getImageData存储数据是否会占用更少的内存或提供更好的性能？

总结一下我的问题是:

这需要更多的内存空间,toDataURL()生成的base64 jpeg或getImageData()的结果？两者之间是否有任何性能差异(关于加载到画布上,以及从画布中提取数据)

提前致谢.

我正在使用glfx.js来编辑我的图像但是当我试图使用该toDataURL()函数获取该图像的数据时,我得到一个空白图像(宽度与原始图像的大小相同).

奇怪的是,在Chrome中脚本运行完美.

我想提到的是canvas使用onload事件加载图像:

           img.onload = function(){

                try {
                    canvas = fx.canvas();
                } catch (e) {
                    alert(e);
                    return;
                }

                // convert the image to a texture
                texture = canvas.texture(img);

                // draw and update canvas
                canvas.draw(texture).update();

                // replace the image with the canvas
                img.parentNode.insertBefore(canvas, img);
                img.parentNode.removeChild(img);

            }

我的图像的路径也在同一个域上;

问题(在Firefox中)是我点击保存按钮.Chrome会返回预期的结果,但Firefox会返回此信息:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA7YAAAIWCAYAAABjkRHCAAAHxklEQVR4nO3BMQEAAADCoPVPbQZ/oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
... [ lots of A s ] ... 
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAzwD6aAABkwvPRgAAAABJRU5ErkJggg==

什么可能导致这个结果,我该如何解决？

我正在使用https://github.com/auduno/clmtrackr

我试图从以下示例中保存图像:https: //github.com/auduno/clmtrackr/blob/dev/examples/facedeform.html

问题是我显然尝试过"canvas.dataToURL()".我可以将网络摄像头的视频作为图像; 但是,叠加图像始终是透明的.

我尝试使用纹理在画布上绘制,但这也无效....

我在这里有一个例子:https://codepen.io/msj121/pen/RgXjYK

我想用覆盖保存整个图像到png,比如我想的"dataToURL".

// when everything is ready, automatically start everything ?

                var vid = document.getElementById('videoel');
                var vid_width = vid.width;
                var vid_height = vid.height;
                var overlay = document.getElementById('overlay');
                var overlayCC = overlay.getContext('2d');
                var webgl_overlay = document.getElementById('webgl');

                // canvas for copying videoframes to
                var videocanvas = document.createElement('CANVAS');
                videocanvas.width = vid_width;
                videocanvas.height = vid_height;

                /*********** Setup of video/webcam and checking for webGL support *********/

                var videoReady = false;
                var imagesReady = …

我需要一些帮助.对于通过HTML 5/Canvas获取图像的base64,我们似乎遇到了iOS问题.如果我们使用画布的默认高度/宽度或硬编码高度和宽度,一切正常.但是,如果我们将画布高度/宽度设置为图像src的高度/宽度,则图像将不会加载到画布中,因此我们不会将图像作为base64.

有效的代码片段:

function convertImageToBase64(imgUrl, callback) {
    var canvas = document.createElement("canvas");
    var context = canvas.getContext('2d');
    // load image from data url
    var imageObj= new Image();
    imageObj.onload = function () {
        var dataUrl;
        context.drawImage(imageObj, 0, 0, canvas.width, canvas.height);

        dataUrl = canvas.toDataURL("image/png");
        callback.call(this, dataUrl);
        canvas = null;
    };
    imageObj.src = imgUrl;
}

代码段在iOS上不起作用但在Android上有效:

function convertImageToBase64(imgUrl, callback) {
    var canvas = document.createElement("canvas");
    var context = canvas.getContext('2d');
    // load image from data url
    var imageObj= new Image();
    imageObj.onload = function () {
        var dataUrl; …