Question

我在StackOverflow内部冲浪并找不到合适的解决方案。

我有serval画布图像，我希望在常规<img>标记中转换为可以通过电子邮件发送，就像普通的HTML一样。

画布图像通常来自视频。这部分效果很好，直到我想将画布转换为图像。

这里是例子：

$(document).on('input change paste keyup','.add-video',$.debounce(350,function(e){
    var $this = $(this),
        id = $this.attr('data-id'),
        type = $(this).attr('data-type'),
        value = $(this).val().trim(),
        main = $('.editable-open').find('tr > td');

    if(value == '' && type != 'alt')
        value=null;

    if(type == 'src'){
        if($.isVideo(value))
        {

            var videoFormat = function(value){
                    var $get = value.split('.');
                    return 'video/' + $get[($get.length-1)];
                },
                video = '<video id="get-video-poster" src="' + value + '" type="' + videoFormat(value) + '" style="display:none"></video><canvas id="video-canvas"></canvas>';

            // 1) - Get video and generate canvas image
            main.html(init.tooltips + video).promise().done(function(){
                var canvas = $('#video-canvas').get(0),
                    context = canvas.getContext('2d'),
                    video = $('#get-video-poster').get(0);

                $('#get-video-poster').on("loadeddata", function () {
                    context.drawImage(video, 5, 5, video.videoWidth, video.videoHeight);
                    $(this).remove();

                    main.find('img').remove();

                    // 2) Get constructed canvas and made regular image
                    setTimeout(function(){
                        var can = document.getElementById('video-canvas');
                        var src = can.toDataURL("image/png", 1);
                        console.log(src);
                        main.append('<img src="'+src+'">');
                    },1000);

                });
            });

        }
        else
        {
            $.get(window.base + '/themes/form-video.html').done(function(html){
                main.html(init.tooltips + html);
            });
        }
    }
}));

从此代码开始，第2阶段无效。我试图获得构造的画布并制作常规图像。

在控制台中我获得了Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

有人可以帮忙吗？

更新

@ T.J。克劳德 - 不知道你读过或理解这个问题，但你提到的解决方案是没有用的，因为toDataURL()没有给我URL。仔细查看我的代码。

如何将canvas图像转换为标准img？

0 个答案: