- 2019-07-22老师，想问下滤镜效果要实际保存下来的话，是否需要转换成svg再转换成dataURI呢？我尝试了下似乎有点复杂，并且效果也不理想，会出现svg不能显示图片的情况。实际过程中保存滤镜的操作应该怎么做呢？
作者回复: 可以参考 @恋着歌 同学的例子 https://codepen.io/anon/pen/rXOMYW， 实际上只需要对 canvas的 ctx 设置虑镜就可了！
7 
2019-07-21滤镜效果图片保存代码简单示例：
。。。
var filtersSelect = document.querySelector("select#filter");
var selected = "";
。。。
document.querySelector("button#TakePhoto").onclick = function (){
var ctx = picture.getContext('2d')
console.log(ctx.filter)
if(selected === "sepia"){
ctx.filter = "sepia(1)";
}else if(selected === "grayscale"){
ctx.filter = "grayscale(1)";
}else if(selected === "blur"){
ctx.filter = "blur(3px)";
}else if(selected === "invert"){
ctx.filter = "invert(1)";
}else{
ctx.filter = "none";
}
ctx.drawImage(videoplay, 0, 0, picture.width, picture.height);
}
。。。
filtersSelect.onchange = function (){
selected = filtersSelect.value;
}展开作者回复: 非常棒！
1 3
2019-07-20现在每天都在等老师更新，凌晨快速看一遍，白天写笔记再看一遍，对于没有基础的同学可能会比较吃力，附上我的GitHub代码地址，供大家参考学习： https://github.com/KuKuXia/Real_Time_Communication_using_WebRTC作者回复: 赞！加油！
3
2019-07-22要代码的同学 https://codepen.io/anon/pen/rXOMYW作者回复: 非常棒!
2
2019-07-20老师，代码没跑起来。需要做如下修改。
画布渲染图片需要改成触发动作，如下:
document.querySelector("button#TakePhoto").onclick = function (){
picture.getContext('2d').drawImage(videoplay, 0, 0, picture.width, picture.height);
}
下载图片画布名称需要改成picture,如下:
downLoad(picture.toDataURL("image/jpeg"));展开作者回复: 下周一我会将相关的代码放到github上，耐心等待一下哈！
2
2019-07-20代码片段有点太零散，还好有点基础可以自己处理，对新手看起来估计就有点懵逼了。作者回复: 会有整体的代码供参考的！下周一就会出来哈
2
2019-07-26老师，滤镜都有了，
要不要再加个瘦脸作者回复: 那个需要通过 WebGL 来处理，你可以自己研究一下哈！
1
2019-07-26...
function downLoad(url){
var oA = document.createElement("a");
oA.download = 'photo';// 设置下载的文件名，默认是'下载'
oA.href = url;
document.body.appendChild(oA);
oA.click();
oA.remove(); // 下载之后把创建的元素删除
}
...
document.querySelector("button#save").onclick = function (){
downLoad(canvas.toDataURL("image/jpeg");)
}
....
老师，是不是应该去掉14行里面的那个分号。展开作者回复: 今天会处理掉，分号标错了！
1- 2019-07-25...
function downLoad(url){
var oA = document.createElement("a");
oA.download = 'photo';// 设置下载的文件名，默认是'下载'
oA.href = url;
document.body.appendChild(oA);
oA.click();
oA.remove(); // 下载之后把创建的元素删除
}
...
document.querySelector("button#save").onclick = function (){
downLoad(canvas.toDataURL("image/jpeg"););
}
....
这一段代码第14行多了一个分号。展开作者回复: 感谢! 感谢!
1 
2019-07-22html2canvas. js 可以把dom和css渲染canvas作者回复: 测试了html2canvas. js的实际效果没？
1
2019-07-20老师可以整理代码作为demo传到github吗？前端新手有点整不明白。作者回复: 下周一就会有了，正在进行中......
1- 2019-07-20调用drawImage方法时图片已经画好了，css只是对图片的渲染形式改变而已，所以下载的图片还是原图
作者回复: 可以继续思考，如果能让下载的图片生效呢？
1 - 2019-07-20打卡~
作者回复: 打卡〜
1 
2019-12-20老师 音视频主要是前端技术吗，适合服务端（Java）的人去学习么作者回复: 音视频包括音端和后端，前端主要责音视频的采集，编解码，传输，渲染。后端主要负责流的分发，选择最佳传输通道，信令控制等。
2019-12-11作业问题回答不上来，不懂浏览器原理。不过照老师的例子和同学的答案，拍照、保存、滤镜；作业保存滤镜图片都成功了。
断舍离，非编码帧和编码帧，先记着最重要的信息。作者回复: 对，先记住要点，后面慢慢理解！
2019-10-17按照这个js代码，点拍照键canvas显示不出图片啊作者回复: 应该是没问题的，你是从git上下载的代码吗？
- 2019-08-15最后的问题是用canvs重新再画一遍吗?
作者回复: 不是，你可以看一下其它同学的留言，其实有问学已经给出答案来了！
1 
2019-08-02滤镜效果图片保存代码简单示例：
...
snapshot.onclick = function () {
let value = filtersSelect.value;
var ctx = picture.getContext('2d');
switch (value) {
case "blur":
ctx.filter = "blur(3px)";
break;
case "sepia":
case "grayscale":
case "invert":
ctx.filter = value + "(1)";
break;
default:
ctx.filter = "none";
break;
}
// picture.className = filtersSelect.value;
ctx.drawImage(videoplay, 0, 0, picture.width, picture.height);
}
...展开作者回复: 赞！
2019-07-29老师，我 myCanvas.getContext('2d').filter = “sepia(1)”;修改了滤镜，alert()的结果也是“sepia(1)”,但下载的结果总是原图。但我把原图片保存到myImage, 重新myCanvas.getContext('2d').drawImage(myImage, 0, 0, myCanvas.width, myCanvas.height); 就可以下载滤镜图片。想问一下，为什么修改容器的filter,需要重新绘图才生效呢？？作者回复: 可以看一下我下传的例子，对比学习一下！
2019-07-27老师，您好，我是做了六七年java服务器端开发的老兵，大学里学习的c和c++早就还给老师了，您一直强调说以后后台是用c和c++，请问用java可以实现吗？还是说音视频这块的后台必须用c和c++？作者回复: 流媒体服务器要频繁接发包，对性能要求比较高，如果你要用Java的话，可以在底层用 JNI 调 C/C++程序