Canvas图像与视频基础,离屏19
/*除了可以把图像绘制到canvas中，还可以把自身或其它canvas、视频的某一帧绘制到当前绘图环境中。
--1--有时两个canvas的相互绘制需要创建离屏canvas，离屏技术实际上是用空间换时间的一种技术
创建离屏canvas元素，可以动态创建元素，也可以用网页中一个隐藏区域的元素
offscreenCanvas = document.createElement('canvas'), offscreenContext = offscreenCanvas.getContext('2d'),
设置离屏canvas的宽和高
在离屏canvas中进行绘制
把离屏canvas中的全部或一部分绘制到另一个canvas中
--2--图像的绘制存在安全问题，默认的情况下允许绘制不属于自己域的图像，但不能通过Canvas API保存或修改其它域中的图像。如果修改其它域的图像则会抛出安全异常，一些浏览器都招供了解决方法，比如：
chrome:在命令行中指定：'--allow-file-access-from-files'参数来启动浏览器；
firefox:通过调用netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
--3--在使用这些API时性能也是一个需要关注的方面，不同的编码其效率不太一样，有一个大致的参考网站:【http://jsperf.com】
drawImage()的速度要优于putImageData();
*/
/**************************************************context.drawImage()方法有如下几种参数形式,图像的绘制不会考虑当前路径，但它会考虑alpha, 阴影，剪辑区域以及图像合成效果等效果*/
1、context.drawImage(img, dx, dy);//dx, dy指定图片与原点的距离
2、context.drawImage(img, dx, dy, dw, dh);//dw, dh指定在目标区域内绘制整张图片，起到了缩放的效果。如果尺寸小于canvas的大小则是缩小，如果大于canvas的大小，则起到了放大的效果，并且一部分图像会绘制在canvas外面，可以通过坐标平移起到背景滚动的效果
3、context.drawImage(img, sx, sy, sw, sh,dx, dy, dw, dh);//会将图像的整体或一部分绘制到canvas中，并在绘制时根据目标的宽度和高度进行缩放，前5个参数与图片有关，后4个参数与画布有关，即S源和D目录
//图片缩放后，永远居中的实现方法............................................
function drawScaled() {
var w = canvas.width,
h = canvas.height,
sw = w * scale,
sh = h * scale;
context.drawImage(offscreenCanvas, 0, 0,
offscreenCanvas.width, offscreenCanvas.height,
-sw/2 + w/2, -sh/2 + h/2, sw, sh);
}
//最简单的例子
var img = new Image();
img.src = "countrypath.jpg";
img.onload = function(){
context.drawImage(img, 10, 10, 1500, 1500);
}
/***************************************************context.getImageData()返回ImageData对象，它有以下三个属性：*/
width:图像的宽度
height:图像的高度
data:包括各个像素值的数组，是一个数组，每4个整数值代表一个像素点RGBA，通过遍历数组，对不同的通道加以运算就可以做出不同的效果来，数组的总个数是4*width*height个，W3C规范现把data以ArrayBuffer来存放
context.getImageData(sx, sy, swidth, sheight);//这4个参数是必须的。指定了取得绘图区域的矩形大小
/***************************************************context.putImageData()，这个方法在绘制图像时不受一些全局参数的影响，而drawImage（）则会受限制*/
context.putImageData(ImageData, dx, dy);//将ImageData绘制在canvas的[dx, dy]处
context.putImageData(ImageData, dx, dy, dirtyX, dirtyY, dirtyW, dirtyY);//后四个参数是可选的指定的是ImageData图像的属性，并不是canvas的属性，起到截取图像的作用，按一定比例设置后可以起到缩放的效果
context.createImageData();
/*下面是对ImageData数据的操作例子，实现了几个不同的滤镜功能，如果利用上述几种特殊滤镜结合setTimeout和setInterval来制作动画(不过效率太低，一般用.requestAnimationFrame()方法)，制作时可以用离屏，设置总体的透明度，以及改变数据值：
【1】负片滤镜：把原像素用255去减
【2】黑白滤镜：算出三个像素的平均值，然后赋值给三个RGB
【3】浮雕滤镜：相对复杂一些
【4】墨镜滤镜：
*/
//负片滤镜
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);//这处注意应该是对象，它里面的data是一个指针，指向数据数组
var data = imageData.data;
for (var i=0; i
data[i+1]= 255 - data[i+1];
data[i+2]= 255 - data[i+2];
}
//浮雕滤镜
for (i=0; i < length; i++) { // loop through every pixel
if (i <= length-width*4) {// if we won't overrun the bounds of the array
if ((i+1) % 4 !== 0) {// if it's not an alpha
// if it's the last pixel in the row, there is
// no pixel to the right, so copy previous pixel's
// values.
if ((i+4) % (width*4) == 0) {
data[i] = data[i-4];
data[i+1] = data[i-3];
data[i+2] = data[i-2];
data[i+3] = data[i-1];
i+=4;
}
else { // not the last pixel in the row
data[i] = 255/2 // Average value
+ 2*data[i] // current pixel
- data[i+4] // next pixel
- data[i+width*4]; // pixel underneath
}
}
}
else { // last row, no pixels underneath,
// so copy pixel above
if ((i+1) % 4 !== 0) {
data[i] = data[i-width*4];
}
}
}
// 墨镜滤镜
for (i=0; i < length; ++i) {
if ((i+1) % 4 != 0) {
if ((i+4) % (width*4) == 0) { // last pixel in a row
data[i] = data[i-4];
data[i+1] = data[i-3];
data[i+2] = data[i-2];
data[i+3] = data[i-1];
i+=4;
}
else {
data[i] = 2*data[i] - data[i+4] - 0.5*data[i+4];
}
}
}