有關Canvas的一點小事—canvas數據和像素點

1、  canvas生成base64數據

canvas.toDataURL()生成的數據可以直接給image對象使用作為<img>顯示在前端，也可以傳給后台生成圖片保存。前端生成保存圖片的好像也有，但是比較麻煩，而且不兼容。我記得zip.js就可以在前端打包圖片生成壓縮包，不過我現在用不到，哪天想到了再整理整理。

　　　　　　　　

　　　　　　　　　　　　　　　　　var contain = document.getElementById('contain');

                             var c=document.getElementById("myCanvas");

                             var ctx=c.getContext("2d");

                             c.width=contain.offsetWidth;

                             c.height=contain.offsetHeight;//***根據容器大小設置寬和高

                             ctx.beginPath();

                             ctx.moveTo(0,0);

                             ctx.lineTo(c.width,c.height);

                             ctx.stroke();

                             ctx.closePath();

                            

                             var data = c.toDataURL();

                             console.log(data);

                             var img2 = document.createElement('img');

                             img2.src = data;

                             document.body.appendChild(img2);

 

 

但是，使用本地圖片繪制的canvas生成base64數據時卻會報錯，受同源限制，報錯如下，如果使用本地服務器就不會報錯。

 

2、  canvas的像素點

獲取像素點：ctx.getImageData(x, y, dx, dy)可以獲取canvas的像素信息,同樣受同源策略限制。參數分別是開始的位置和獲取的大小，這個方法返回一個ImageData對象（包括像素信息數組data還有寬高width/height）。

每一個位置的像素點包括r,g,b,a四個通道的值，所以imageData的data是一個像素矩陣，包含所有指定像素點的四個通道信息。

 更改像素點：putImageData(imgData, x, y)

　　　　　　　　　　ctx.beginPath();
                ctx.moveTo(0,0);
                ctx.lineTo(c.width,c.height);
                ctx.stroke();
                ctx.closePath();
                var d = ctx.getImageData(0,0,2,2);//獲取像素點
                console.log(d);
                var imgData = ctx.createImageData(100, 100);
                ctx.putImageData(imgData,0,0);//更改像素點

 

 

參考：

HTML5畫布Canvas圖片抽取、像素信息獲取、命中檢測：https://blog.csdn.net/q1056843325/article/details/54428095