HTML5 canvas drawImage方法实现读取图片数据截图拼接图片。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{margin:0 auto;}
.box{border: 1px solid #ccc;width:1205px;height:400px;margin:0 auto;}
.box canvas {display:inline-block;width: 600px;height:300px;background:#ccc;}
</style>
</head>
<body>
<div class="prev" style="height:300px;width:300px;">
</div>
<div style="display:none">
<img src="./img1.png" />
<img src="./img2.png" />
</div>
<div class="box">
<canvas id="canvas"></canvas>
<canvas id="canvas1"></canvas>
<div>
<input type="file" id="file1"/>
<input type="file" id="file2"/>
<button id="copyBtn">复制图片</button>
</div>
</div>
</body>
<script>
let canvas = document.querySelector('#canvas').getContext("2d");
let canvas1 = document.querySelector('#canvas1').getContext("2d");
let img = document.querySelectorAll('img')[0];
let img1 = document.querySelectorAll('img')[1];
document.querySelector('#file1').onchange = function (event) {
// img.src = './img1.png';
let file = event.target.files[0];
let reader = new FileReader();
//转base64
reader.onload = function(e) {
// img.src = e.target.result;
}
img.width = '100px';
img.height = '100px';
reader.readAsDataURL(file);
canvas.drawImage(img, 0, 0, 100, 100, 10, 10, 100, 100);
var imgData = canvas.getImageData(10,10,100,100);
console.log(imgData);
};
document.querySelector('#file2').onchange = function (event) {
// img.src = './img1.png';
let file = event.target.files[0];
let reader = new FileReader();
//转base64
reader.onload = function(e) {
// img.src = e.target.result;
}
reader.readAsDataURL(file);
canvas.drawImage(img1, 0, 0, 100, 100, 200, 10, 100, 100); // 画布上的大小比实际大小大2倍，画布上显示像素为200px * 200px
var imgData = canvas.getImageData(10,10,100,100);
console.log(imgData);
};
document.querySelector('#copyBtn').onclick = function () {
var dataURL = document.querySelector('#canvas').toDataURL("image/png");
console.log(dataURL);
let img = new Image();
img.src = dataURL;
document.querySelector('.prev').appendChild(img);
canvas1.drawImage(img, 0, 0);
};
</script>
</html>结果：