将Canvas toDataURL赋予一个.png扩展名,以便与Key Lemon一起使用

时间:2016-02-12 15:32:21

标签: javascript image canvas

我正在尝试将Key Lemon的面部检测API应用到我的应用程序中。为了使用它,我需要使用以下图像格式之一为API提供多个图像URL。 JPEG,PNG,GIF或BMP。

我想知道的是,是否可以使用canvas.toDataURL('image/png');生成图片网址,并在其末尾添加.png扩展名,以便Key Lemon API可以将其识别为实际图像?

以下是我用于从用户的网络摄像头拍摄用户照片并将该图像提供给Key Lemon面部检测API的代码

捕获并绘制图像:

var video = document.querySelector('#videoElement');
var canvas = document.getElementById('canvas');
var dataURL = canvas.toDataURL('image/png');
$scope.userImageURLs.push(dataURL);
var context = canvas.getContext('2d');
context.drawImage(video, 0, 0, 210, 155);

将图片发送到API:

var xmlhttp = new XMLHttpRequest();
    var url = 'https://klws.keylemon.com/api/face/?user=user_name&key=my_key&urls='+dataURL;

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState === 4 && xmlhttp.status  === 200) {
            responseToJSON(xmlhttp.responseText);
            console.log('All OK: ', xmlhttp.readyState);
        }
        else {
            console.log('NOT OK:');
            console.log(xmlhttp.readyState, xmlhttp.status);
        }
    };

    xmlhttp.open('POST', url);
    xmlhttp.send();

感谢您的时间。

0 个答案:

没有答案