Как загрузить изображение на холсте HTML5?

Я написал это приложение webRTC, которое делает фотографии с различными фильтрами, добавленными на него. Когда я нажимаю кнопку клика, рамка из видеоролика webRTC загружается на холст с правой стороны.Как загрузить изображение на холсте HTML5?

enter image description here

HTML код -

<video id="vid" autoplay="true"></video> 
<canvas id="cvs"></canvas> 
<button id="btn1" onclick="start()">Start</button> 
<button id="btn2" onclick="change()">Change Filter</button> 
<button id="btn3" onclick="snap()" ng-click="random()">Click</button>

Функция я написал, чтобы сделать снимок на холсте после добавления фильтра выглядит следующим образом

function snap() 
    { 
    canvas.className = ''; 
    if (findex != 0) 
    canvas.classList.add(filters[findex]); 
    canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height); 
    }

Как может Я разрешаю пользователю загружать изображение на компьютер с холста с фильтрами после щелчка фотографии ed?

источник

2014-09-26 Jash Jacob

Вы можете сделать это с помощью метода '.toDataURL()' в элементе 'canvas', используя тег' a'. Вот пример (не мой): http://jsfiddle.net/AbdiasSoftware/7PRNN/ –

@SpencerWieczorek Это не позволяет загружать изображение с холста после того, как эффект был применен. toDataURL() загружает изображение с холста без эффектов. Как связать фильтры с изображениями перед загрузкой? –

Вам нужно будет применить фильтр непосредственно к элементу 'canvas'. Затем загрузите, этот метод загружает именно то, что находится в контексте холста. –

Вы можете сделать это, используя метод .toDataURL() на элементе canvas. А затем примените его к атрибуту download к тегу <a>. Мы можем добавить якорь тег вокруг изображения:

<a> 
    <canvas width="300" height="300" id="canvas"></canvas> 
</a>

Теперь щелкать на холсте, мы регулируем download и href из <a> родителя:

$('#canvas').click(function(){ 
    $(this).parent().attr('href', document.getElementById('canvas').toDataURL()); 
    $(this).parent().attr('download', "myPicture.png");  
});

Here is an example

источник

2014-09-26 01:51:02

Спасибо. Это решило мою первую проблему, но изображение, которое загружается, не имеет соответствующего фильтра css-webkit, который я применил. –

@JashJacob Это потому, что он сохраняет исходные данные на холсте. Вам придется применить фильтр непосредственно к контексту холста. Холст не может получить доступ к фильтрам CSS, чтобы привязываться к нему. Вам нужно будет изменить 'ctx.getImageData'. Для базовых эффектов это не сложно (например, серая шкала). Что делает ваш фильтр? –

Я делаю что-то вроде этого -webkit-filter: контраст (1.3) оттенки серого (0.6) насыщенный (10) сепия (0.4); и -webkit-filter: оттенок-поворот (180deg) насыщенный (200%); –

Вы могли бы также рассмотрим использование Concrete.js, который представляет собой легкую платформу Canvas для HTML5, которая делает такие периферийные вещи, как загрузка. Вы бы просто сделали:

canvas.download({ 
    fileName: 'my-file.png' 
});

источник

2016-03-31 15:13:16

Как загрузить изображение на холсте HTML5?

ответ

Смежные вопросы