canvas.toDataURL to img src

本文关键字：src img to toDataURL canvas 更新时间：2023-09-26

我最近下载了一个开源网络摄像头到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);
         }
     });

 });

~~##Convert 你的 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 添加为表单数据并发送到服务器

将数据作为 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);
});

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