Open WangShuXian6 opened 5 years ago
返回一个ImageData对象,用来描述canvas区域隐含的像素数据,这个区域通过矩形表示,起始点为(sx, sy)、宽为sw、高为sh
ImageData ctx.getImageData(sx, sy, sw, sh)
sx 将要被提取的图像数据矩形区域的左上角 x 坐标。 sy 将要被提取的图像数据矩形区域的左上角 y 坐标。 sw 将要被提取的图像数据矩形区域的宽度。 sh 将要被提取的图像数据矩形区域的高度。
如果高度或者宽度变量为0,则抛出错误
<canvas id="canvas"></canvas>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.rect(10, 10, 100, 100);
ctx.fill();
console.log(ctx.getImageData(50, 50, 100, 100));
// ImageData { width: 100, height: 100, data: Uint8ClampedArray[40000] }
此画布的四个角落分别表示为(left, top), (left + width, top), (left, top + height), 以及(left + width, top + height)四个点。这些坐标点被设定为画布坐标空间元素。 任何在画布以外的元素都会被返回成一个透明黑的ImageData对像
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
canvas对象真实的像素数据
只读属性 width 图片宽度,单位是像素 height 图片高度,单位是像素 data Uint8ClampedArray类型的一维数组,包含着RGBA格式的整型数据,范围在0至255之间(包括255)。
data属性返回一个 Uint8ClampedArray,它可以被使用作为查看初始像素数据。每个像素用4个1bytes值(按照红,绿,蓝和透明值的顺序; 这就是"RGBA"格式) 来代表。每个颜色值部份用0至255来代表。每个部份被分配到一个在数组内连续的索引,左上角像素的红色部份在数组的索引0位置。像素从左到右被处理,然后往下,遍历整个数组。
Uint8ClampedArray 包含高度 × 宽度 × 4 bytes数据,索引值从0到(高度×宽度×4)-1
读取图片中位于第50行,第200列的像素的蓝色部份
blueComponent = imageData.data[((50*(imageData.width*4)) + (200*4)) + 2]
let numBytes = imageData.data.length
***
>创建一个新的具体特定尺寸的ImageData对象。所有像素被预设为透明黑
```javascript
let myImageData = ctx.createImageData(width, height)
创建一个被anotherImageData对象指定的相同像素的ImageData对象。这个新的对象像素全部被预设为透明黑。这个并非复制了图片数据。
let myImageData = ctx.createImageData(anotherImageData)
在场景内左上角绘制myImageData代表的图片
ctx.putImageData(myImageData, 0, 0)
HTMLCanvasElement 提供一个toDataURL()方法,此方法在保存图片的时候非常有用。它返回一个包含被类型参数规定的图像表现格式的数据链接。返回的图片分辨率是96dpi。
canvas.toDataURL('image/png') 默认设定。创建一个PNG图片。 https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL
canvas.toDataURL('image/jpeg', quality) 创建一个JPG图片。你可以有选择地提供从0到1的品质量,1表示最好品质,0基本不被辨析但有比较小的文件大小。 https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL
当从画布中生成了一个数据链接,例如,你可以将它用于任何
元素,或者将它放在一个有download属性的超链接里用于保存到本地。 也可以从画布中创建一个Blob对像。 canvas.toBlob(callback, type, encoderOptions) 这个创建了一个在画布中的代表图片的Blob对像。 https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toBlob
使用getImageData()去展示鼠标光标下的颜色。为此,我们要当前鼠标的位置,记为layerX和layerY,然后我们去查询getImageData()给我们提供的在那个位置的像数数组里面的像素数据。最后我们使用数组数据去设置背景颜色和
的文字去展示颜色值。https://codepen.io/WangShuXian6/pen/ZmJBjd?editors=1010 图片如果跨域需要服务端设置允许
<canvas id="canvas"></canvas> <div id="canvasr"></div>
let data='data:image/jpeg;base64,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' let img = new Image() img.crossOrigin = 'Anonymous' //img.src = 'http://huaban.com/go/?pin_id=2120272012' img.src=data let canvas = document.getElementById('canvas') let ctx = canvas.getContext('2d') img.onload = function() { ctx.drawImage(img, 0, 0) img.style.display = 'none' } let color = document.getElementById('canvasr') function pick(event) { let x = event.layerX let y = event.layerY let pixel = ctx.getImageData(x, y, 1, 1) let data = pixel.data let rgba = 'rgba(' + data[0] + ',' + data[1] + ',' + data[2] + ',' + (data[3] / 255) + ')' color.style.background = rgba color.textContent = rgba console.log(rgba) } canvas.addEventListener('mousemove', pick)
在这个例子里,我们遍历所有像素以改变他们的数值。然后我们将被修改的像素数组通过putImageData()放回到画布中去。invert函数仅仅是去减掉颜色的最大色值255.grayscale函数仅仅是用红绿和蓝的平均值。你也可以用加权平均,例如x = 0.299r + 0.587g + 0.114b这个公式。更多资料请参考维基百科的Grayscale
https://codepen.io/WangShuXian6/pen/NEvdPo
<canvas id='canvas'></canvas> <button id='invertbtn'>invert</button> <button id='grayscalebtn'>grayscale</button>
let data='data:image/jpeg;base64,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'
let img = new Image() img.src = data img.onload = function() { draw(this) }
function draw(img) { let canvas = document.getElementById('canvas') let ctx = canvas.getContext('2d') ctx.drawImage(img, 0, 0) img.style.display = 'none' let imageData = ctx.getImageData(0,0,canvas.width, canvas.height) let data = imageData.data
let invert = function() { // data 是对 imageData 的引用,故修改 data 会修改 imageData 的值 for (let i = 0; i < data.length; i += 4) { data[i] = 225 - data[i] // red data[i + 1] = 225 - data[i + 1] // green data[i + 2] = 225 - data[i + 2] // blue }
// 将修改后的 imageData 推入 ctx ctx.putImageData(imageData, 0, 0) }
let grayscale = function() { for (let i = 0; i < data.length; i += 4) { let 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) };
let invertbtn = document.getElementById('invertbtn') invertbtn.addEventListener('click', invert) let grayscalebtn = document.getElementById('grayscalebtn') grayscalebtn.addEventListener('click', grayscale) }
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="file" name="image" id="file" accept="image/*" capture/>
<canvas id="canvas" width="300" height="400"></canvas>
<script>
const imageInputWrapper = document.querySelector('#file')
const initCanvas = document.querySelector('#canvas')
const initCanvasCtx = initCanvas.getContext('2d')
// const imageFileToBase64=(imageFile,callback)=>{
// let reader = new FileReader()
// reader.readAsDataURL(imageFile)
// reader.onload=(e)=>{
// const base64=e.target.result
// callback(base64)
// }
// }
// const loadImage=(imageSrc,callback)=>{
// let image = new Image()
// image.src = imageSrc
// image.onload=()=>{
// callback(image)
// }
// }
const drawWhiteCanvas=(initCanvasCtx)=>{
initCanvasCtx.fillStyle='red'
initCanvasCtx.fillRect(0, 0, 900,900)
}
// const drawImage=(initCanvasCtx,image)=>{
// initCanvasCtx,drawImage(image,0,0)
// }
imageInputWrapper.addEventListener('change', () => {
console.log('imageInputWrapper--', imageInputWrapper.files[0])
const imageFile = imageInputWrapper.files[0]
drawWhiteCanvas(initCanvasCtx)
let reader = new FileReader()
reader.readAsDataURL(imageFile)
reader.onload = (e) => {
const base64 = e.target.result
let image = new Image()
image.src = base64
image.onload = () => {
console.log('image--', image)
initCanvasCtx.drawImage(image, 0, 0, 200, 200);
}
}
})
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui"/>
<title>PhotoClip</title>
<style>
body {
margin: 0;
text-align: center;
}
#clipArea {
height: 300px;
}
#file,
#clipBtn {
margin: 20px;
}
#view {
margin: 0 auto;
width: 200px;
height: 200px;
background-color: #666;
}
#init-canvas{
position: fixed;
left: -100vw;
bottom: -100vh;
z-index: -100;
opacity: 0;
}
</style>
</head>
<body ontouchstart="">
<div id="clipArea"></div>
<!--<input type="file" id="file">-->
<input type="file" name="image" id="file" accept="image/*" capture/>
<button id="clipBtn">截取</button>
<div id="view"></div>
<canvas id="init-canvas" width="500" height="500"></canvas>
<script src="js/hammer.min.js"></script>
<script src="js/iscroll-zoom-min.js"></script>
<script src="js/lrz.all.bundle.js"></script>
<script src="js/PhotoClip.js"></script>
<script>
const imageInputWrapper = document.querySelector('#file')
const initCanvas = document.querySelector('#init-canvas')
const initCanvasCtx = initCanvas.getContext('2d')
const drawWhiteCanvas = (initCanvasCtx) => {
initCanvasCtx.fillStyle = 'red'
initCanvasCtx.fillRect(0, 0, 900, 900)
}
imageInputWrapper.addEventListener('change', () => {
console.log('imageInputWrapper--', imageInputWrapper.files[0])
const imageFile = imageInputWrapper.files[0]
drawWhiteCanvas(initCanvasCtx)
let reader = new FileReader()
reader.readAsDataURL(imageFile)
reader.onload = (e) => {
const base64 = e.target.result
let image = new Image()
image.src = base64
image.onload = () => {
const canvasWidth = initCanvas.width
const canvasHeight = initCanvas.height
const imageWidth = image.width
const imageHeight = image.height
let drawX
let drawY
let drawWidth
let drawHeight
if (imageWidth >= imageHeight) {
drawX = 0
drawY = (canvasHeight - imageHeight / imageWidth * canvasWidth) / 2
drawWidth = canvasWidth
drawHeight = imageHeight / imageWidth * canvasWidth
} else {
drawX = (canvasWidth - imageWidth / imageHeight * canvasHeight) / 2
drawY = 0
drawWidth = imageWidth / imageHeight * canvasHeight
drawHeight = canvasHeight
}
initCanvasCtx.drawImage(image, drawX, drawY, drawWidth, drawHeight);
const finalImage = initCanvas.toDataURL("image/jpeg", 1.0)
initClip(finalImage)
}
}
})
const initClip = (img) => {
let pc = new PhotoClip('#clipArea', {
size: [260, 260],
outputSize: 640,
//adaptive: ['60%', '80%'],
//file: '#file',
img,
view: '#view',
ok: '#clipBtn',
//img: 'img/mm.jpg',
loadStart: function () {
console.log('开始读取照片');
},
loadComplete: function () {
console.log('照片读取完成');
},
done: function (dataURL) {
console.log(dataURL);
},
fail: function (msg) {
alert(msg);
}
});
// 加载的图片必须要与本程序同源,否则无法截图
pc.load(img);
}
</script>
</body>
</html>
const canvasWidth = initCanvas.width
const canvasHeight = initCanvas.height
const imageWidth = image.width
const imageHeight = image.height
let drawX
let drawY
let drawWidth
let drawHeight
if (imageWidth >= imageHeight) {
drawX = 0
drawY = (canvasHeight - imageHeight / imageWidth * canvasWidth) / 2
drawWidth = canvasWidth
drawHeight = imageHeight / imageWidth * canvasWidth
} else {
drawX = (canvasWidth - imageWidth / imageHeight * canvasHeight) / 2
drawY = 0
drawWidth = imageWidth / imageHeight * canvasHeight
drawHeight = canvasHeight
}
initCanvasCtx.drawImage(image, drawX, drawY, drawWidth, drawHeight);
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="./index.less"> <title>Title</title> <meta name="viewport" content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1,target-densitydpi=device-dpi "> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes"> </head> <body> <canvas width="500" height="1160" id="main-canvas"></canvas>
Canvas