您现在的位置: 首页 > 网站导航收录 > 百科知识百科知识
coay(推荐10个常用的图片处理小帮手（下）)
图片,数据,图像coay(推荐10个常用的图片处理小帮手（下）)
发布时间：2016-12-08加入收藏来源：互联网点击：
在转换完成后，我们就可以压缩后的图片对应的 Blob 对象封装在 FormData 对象中，然后再通过 AJAX 提交到服务器上：
function uploadFile(url, blob) { let formData = new FormData(); let request = new XMLHttpRequest(); formData.append("image", blob); request.open("POST", url, true); request.send(formData);}3.5 如何操作位图像素数据
如果想要操作图片像素数据，我们可以利用 CanvasRenderingContext2D 提供的 getImageData 来获取图片像素数据，其中 getImageData() 返回一个 ImageData 对象，用来描述 canvas 区域隐含的像素数据，这个区域通过矩形表示，起始点为（sx, sy）、宽为 sw、高为 sh。其中 getImageData方法的语法如下：
ctx.getImageData(sx, sy, sw, sh);
相应的参数说明如下：
sx：将要被提取的图像数据矩形区域的左上角 x 坐标。sy：将要被提取的图像数据矩形区域的左上角 y 坐标。sw：将要被提取的图像数据矩形区域的宽度。sh：将要被提取的图像数据矩形区域的高度。在获取到图片的像素数据之后，我们就可以对获取的像素数据进行处理，比如进行灰度化或反色处理。当完成处理后，若要在页面上显示处理效果，则我们需要利用 CanvasRenderingContext2D 提供的另一个 API —— putImageData。
该 API 是 Canvas 2D API 将数据从已有的 ImageData 对象绘制到位图的方法。如果提供了一个绘制过的矩形，则只绘制该矩形的像素。此方法不受画布转换矩阵的影响。putImageData 方法的语法如下：
void ctx.putImageData(imagedata, dx, dy);void ctx.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);
相应的参数说明如下：
imageData： ImageData ，包含像素值的数组对象。dx：源图像数据在目标画布中的位置偏移量（x 轴方向的偏移量）。dy：源图像数据在目标画布中的位置偏移量（y 轴方向的偏移量）。dirtyX（可选）：在源图像数据中，矩形区域左上角的位置。默认是整个图像数据的左上角（x 坐标）。dirtyY（可选）：在源图像数据中，矩形区域左上角的位置。默认是整个图像数据的左上角（y 坐标）。dirtyWidth（可选）：在源图像数据中，矩形区域的宽度。默认是图像数据的宽度。dirtyHeight（可选）：在源图像数据中，矩形区域的高度。默认是图像数据的高度。介绍完相关的 API，下面我们来举一个实际例子：
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>图片反色和灰度化处理</title> </head> <body onload="loadImage()"> <div> <button id="invertbtn">反色</button> <button id="grayscalebtn">灰度化</button> </div> <canvas id="canvas" width="800" height="600"></canvas> <script> function loadImage() { var img = new Image(); img.crossOrigin = ""; img.onload = function () { draw(this); }; // 这是阿宝哥的头像哟 img.src = "https://avatars3.githubusercontent.com/u/4220799"; } function draw(img) { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0); img.style.display = "none"; var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); var data = imageData.data; var invert = function () { for (var i = 0; i < data.length; i = 4) { data[i] = 255 - data[i]; // red data[i 1] = 255 - data[i 1]; // green data[i 2] = 255 - data[i 2]; // blue } ctx.putImageData(imageData, 0, 0); }; var grayscale = function () { for (var i = 0; i < data.length; i = 4) { var avg = (data[i] data[i 1] data[i 2]) / 3; data[i] = avg; // red data[i 1] = avg; // green data[i 2] = avg; // blue } ctx.putImageData(imageData, 0, 0); }; var invertbtn = document.getElementById("invertbtn"); invertbtn.addEventListener("click", invert); var grayscalebtn = document.getElementById("grayscalebtn"); grayscalebtn.addEventListener("click", grayscale); } </script> </body></html>
需要注意的在调用 getImageData 方法获取图片像素数据时，你可能会遇到跨域问题，比如：
Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
下一篇：返回列表
相关链接 |
||
| 网友回复（共有 0 条回复） |