canvas的getImageData处理本地图片跨域问题解决方法

图片资源存储在本地时默认没有域名,而canvas的getImageData方法受同源策略限制,使用getImageData处理本地图片时浏览器会判定为跨域而报错。
canvas的getImageData处理本地图片跨域问题解决方法_第1张图片
解决方法:
使用FileReader对象的readAsDataURL读取指定的Blob中的内容,读取完成后,FileReader对象的result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。将result赋值给Image对象的src然后加载到canvas上就能使用getImageData对图像进行操作。
核心代码:

document.querySelector("#File").onchange = function(){
	var Reader = new FileReader();		 // 创建文件读取对象 
	Reader.readAsDataURL(this.files[0]); //读取Blob,获取DataURL 
	Reader.onload = function(){
		let img = new Image();
		img.src = Reader.result; 		 //将result赋值给Image对象的src
		img.onload = function(){
			cxt.drawImage(img,0,0,canvas.width,canvas.height);
			let imageData = cxt.getImageData(0,0,canvas.width,canvas.height);
			console.log(imageData);
		}
	}
}

示例代码

<!DOCTYPE html>
<html>
<head>
	<title>图像滤镜</title>
	<meta charset="utf-8">
	<style type="text/css">
		main{
			width: 1400px;
			margin: 0 auto;
		}
		canvas{
			box-shadow: 0 0 5px gray;
			display: inline-block;
			margin-left: 50px;
		}
	</style>
</head>
<body>
	<main>
		<canvas id="mycanvas" width="400" height="250"></canvas>
		<canvas id="filter" width="400" height="250"></canvas>
		<form style="margin: 20px 0 0 42px">
			上传本地图片:<input type="file" id="File" name="file"/><br/>
		</form>
	</main>
	<script type="text/javascript">
		let canvas = document.getElementById('mycanvas');
		let cxt = canvas.getContext("2d");
		let filter = document.getElementById('filter');
		let filter_cxt = filter.getContext("2d");
		window.onload = function(){
			document.querySelector("#File").onchange=function(){
				var Reader=new FileReader();
				Reader.readAsDataURL(this.files[0]);
				Reader.onload=function(){
					let img = new Image();
					img.src = Reader.result;
					img.onload = function(){
						cxt.drawImage(img,0,0,canvas.width,canvas.height);
						let imageData = cxt.getImageData(0,0,canvas.width,canvas.height);
						console.log(imageData);
						let data = imageData.data;
						for(let i=0;i<data.length;i+=4){
							let grayscale = data[i]*0.3+data[i+1]*0.6+data[i+2]*0.1;
							data[i] = grayscale;
							data[i+1] = grayscale;
							data[i+2] = grayscale;
						}
						filter_cxt.putImageData(imageData,0,0);
						cxt.font = "20px Calibri";
						cxt.fillText("原图",10,30);
						filter_cxt.font = "20px Calibri";
						filter_cxt.fillStyle = "white";
						filter_cxt.fillText("黑白",10,30);
					}
				}
			}
		}
	</script>
</body>
</html>

效果图:
canvas的getImageData处理本地图片跨域问题解决方法_第2张图片

你可能感兴趣的:(JavaScript)