- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>
- 绘制图片
- </title>
- <style type="text/CSS">
- canvas{ border:1px solid red; }
- </style>
- </head>
- <body>
- <canvas id="mycanvas" width="800" height="500">
- 您的浏览器不支持canvas
- </canvas>
- </body>
- <script type="text/javascript">
- var canvas = document.getElementById("mycanvas");
- var context = canvas.getContext("2d");
- var img = new Image();
- img.src = "gui.jpg";
- img.onload = function() {
- context.drawImage(img, 0, 0);
- //获取画布上所有像素点
- var imageData = context.getImageData(0, 0, 800, 500);
- console.log(imageData) for (var i = 0; i < imageData.data.length; i += 4) {
- var r = imageData.data[i];
- var g = imageData.data[i + 1];
- var b = imageData.data[i + 2];
- var gray = (r + g + b) / 3;
- imageData.data[i] = gray;
- imageData.data[i + 1] = gray;
- imageData.data[i + 2] = gray;
- }
- //把改完的像素点重新放到画布上
- context.putImageData(imageData, 100, 100);
- }
- </script>
- </html>
图片. png
imageData.data.length 是获取到的像素点的个数,根据我们的 rgba 取值,imageData.data[i] 表示红色 r,imageData.data[i+1] 表示绿色 g,imageData[i+2] 表示蓝色 b,imageData.data[i+3] 表示透明度 a,我们去 r、g、b 三者的平均值来得到灰色。 正如上面代码中的写法
我们再补充一个,大家知道怎么取颜色的反色吗? 反色就是将 255 - 原来的 rgb 值,得到新的 rgb 值,就能得到反色,利用这种方法没我们也可以将图片进行反色处理
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>
- 绘制图片
- </title>
- <style type="text/css">
- canvas{ border:1px solid red; }
- </style>
- </head>
- <body>
- <canvas id="mycanvas" width="800" height="500">
- 您的浏览器不支持canvas
- </canvas>
- </body>
- <script type="text/javascript">
- var canvas = document.getElementById("mycanvas");
- var context = canvas.getContext("2d");
- var img = new Image();
- img.src = "caomei-003.jpg";
- img.onload = function() {
- context.drawImage(img, 0, 0);
- //获取画布上所有像素点
- var imageData = context.getImageData(0, 0, 800, 500);
- console.log(imageData) for (var i = 0; i < imageData.data.length; i += 4) {
- var r = imageData.data[i];
- var g = imageData.data[i + 1];
- var b = imageData.data[i + 2];
- imageData.data[i] = 255 - r;
- imageData.data[i + 1] = 255 - g;
- imageData.data[i + 2] = 255 - b;
- }
- // //把改完的像素点重新放到画布上
- context.putImageData(imageData, 100, 100);
- }
- </script>
- </html>
得到效果如图
图片. png
1、canvas.toDataURL() 方> 法返回一个包含图片展示的所有信息,参数可忽略 2、如果画布的宽度或高度为 0,那么返回字符串 "data:," 3、返回值以 "data:image/png,base64" 开头,说明该方法已经将图片转化为 base64 格式,返回值类型是 string 类型。
下面我写个测试,在点击按钮时会在画布上画一个一模一样的图形
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style type="text/css">
- canvas{
- border:1px solid red;
- }
- </style>
- </head>
- <body>
- <canvas id="mycanvas" width="=400" height="400"></canvas>
- <button onclick="sub()">点击</button>
- </body>
- <script type="text/javascript">
- var canvas = document.getElementById("mycanvas");
- context = canvas.getContext("2d");
- context.beginPath();
- context.fillStyle = "red";
- context.fillRect(100,100,100,100);
- console.log(canvas.toDataURL())
- function sub(){
- //将矩形变成图片
- var base64 = canvas.toDataURL();
- var img = new Image();
- img.src = base64;
- document.getElementsByTagName("body")[0].appendChild(img);
- }
- </script>
- </html>
图片. png
打印出来的图片信息如下
图片. png
我们可以直接将该 data 信息复制到浏览器的地址栏打开
图片. png
来源: http://www.jianshu.com/p/1ed21537d490