javascript - canvas.toDataURL 到 img src

Question

我最近下载了一个开源网络摄像头到 gif 脚本，当创建 gif 时，它会保存为 dataurl。他们是我可以改变这一点的方法吗？我宁愿将其保存在服务器上的文件夹中，并且类似于 http://example.com/folder/image.gif

代码:

    *global GIFEncoder,encode64*/
var encoder = new GIFEncoder(),
    video = document.querySelector('video'),
    canvas = document.querySelector('canvas'),
    ctx = canvas.getContext('2d'),
    localMediaStream = null,
    snapshotPause = 0,
    recording = true,
    framesPause = 120,
    maxFrames = 28,
    totalFrames = 0,
    t;

encoder.setSize(320, 240);
encoder.setRepeat(0);
encoder.setDelay(framesPause);
encoder.setQuality(90);

window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

if (navigator.getUserMedia) {
    navigator.getUserMedia({
            audio: true,
            video: true
        }, function (stream) {
            $('#start-image, #start-fake').hide();
            $('#video, #start').show();
            video.src = window.URL.createObjectURL(stream);
            localMediaStream = stream;
        }, function (e) {
            console.log('Error:', e);
        }
    );
} else {
    console.log('not supported');
}

function snapshot() {
    if (localMediaStream) {
        ctx.drawImage(video, 0, 0, 320, 240);
        encoder.addFrame(ctx);

        var image = $('<img />').attr('src', canvas.toDataURL('image/gif'));
        $('#thumbs').append(image);
        totalFrames++;
        if (totalFrames === maxFrames) {
            recordingEnd();
        }
    }
}

    function recordingEnd() {
    var binaryGif = encoder.stream().getData(),
        dataUrl = 'data:image/gif;base64,' + encode64(binaryGif),
        gif = $('<img />').attr('src', dataUrl);

    totalFrames = 0;
    recording = !recording;

    $('#start').html('Start');
    clearInterval(t);
    $('#indicator').hide();

    encoder.finish();

    $('#result-gif').html('').append(gif);
    overlayShow('preview');
    //b64 = encode64(binaryGif);
}

function overlayShow(panel) {
    $('.panel').hide();
    $('#' + panel).show();
    $('#overlay-bg').show();
    $('#overlay').show();
}

function overlayHide() {
    $('#overlay-bg').hide();
    $('#overlay').hide();
}

$('#start').click(function () {

    if (recording) {

        recording = !recording;

        $('#thumbs-holder-close').show();
        $('#thumbs-holder').animate({
            'margin-left': '320px'
        }, 300);
        $('#thumbs').html('');
        encoder.start();

        $('#indicator').show().animate({
            width: '100%'
        }, snapshotPause, function () {
            $('#indicator').css({
                'width': '0'
            });
        });

        t = setInterval(function () {

            snapshot();
            $('#indicator').animate({
                width: '100%'
            }, snapshotPause, function () {
                $('#indicator').css({
                    'width': '0'
                });
            });
        }, snapshotPause);

        $(this).html('Stop');

    } else {

        recordingEnd();
    }

});

    $('#thumbs-holder-close').click(function () {
    $(this).hide();
    $('#thumbs-holder').animate({
        'margin-left': 0
    }, 300);
});

$('#overlay-close').click(function () {
    overlayHide();
});

$('.new').click(function () {
    overlayHide();
});

$('#showSettings').click(function () {
    overlayShow('settings');
});

$('input[type=range]').change(function () {
    var id = $(this).attr('id'),
        val = $(this).val();
    $(this).next().html(val);
    window[id] = parseInt(val);
    if (id === 'framesPause') {
        framesPause = val;
        encoder.setDelay(framesPause);
    }
});

$('#save').click(function () {

     $.ajax({
         url: 'images/save.php',
         method: 'POST',
         data: {
             image: b64
         },
         dataType: 'json',
         success: function(data) {
             var a = $('<a />').attr('href', "images/" + data.name).html('permalink');
             $('#url').append(a);
         },
         error: function(err) {
             console.log(err);
         }
     });


 });

Answer 1

##将您的 dataUrl 转换为 Blob

function dataURLtoBlob(dataURL) {
  // Decode the dataURL    
  var binary = atob(dataURL.split(',')[1]);
  // Create 8-bit unsigned array
  var array = [];
  for(var i = 0; i < binary.length; i++) {
      array.push(binary.charCodeAt(i));
  }
  // Return our Blob object
  return new Blob([new Uint8Array(array)], {type: 'image/gif'});
}
/* var file= dataURLtoBlob(dataURL); */

现在，您可以将 Blob 添加为 FormData 并发送到服务器

将数据作为 Blob 而不是 dataUrl 发送。

正如 bergi 指出的，encode.stream().getData() 实际上返回一个二进制字符串。

var array = [];
for(var i = 0; i < binaryGIF.length; i++) {
   array.push(binaryGIF.charCodeAt(i));
}
// Return our Blob object
var file = new Blob([new Uint8Array(array)], {type: 'image/gif'});

// Create new form data
var fd = new FormData();
// Append our Canvas image file to the form data
fd.append("sample-image-name-for-name-attribute", file);
// And send it
$.ajax({
   url: "my-rest-endpoint",
   type: "POST",
   data: fd,
   processData: false,
   contentType: false,
}).done(function(respond){
  alert(respond);
});

希望有帮助。您应该能够在处理正常文件上传时使用服务器上的文件。