iahu/screenshot-auto-connect.html

## screenshot-auto-connect.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <!--  select two pictures, and the top one first  -->
  <input type="file" name="file" id="file" multiple>
  <script>
    const preview = src => {
      const img = new Image();
      img.src = src;
      return img;
    };
    const getPixel = img => {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      const {width, height} = img;
      canvas.width = width;
      canvas.height = height;
      ctx.drawImage(img, 0, 0, width, height);
      return ctx.getImageData(0, 0, width, height);
    };
    const connectPic = (top, bottom, bottomAlignAtRow, gap) => {
      const topHeight = top.height;
      const bottomLeftHeight = bottom.height - bottomAlignAtRow;
      const totalHeight = topHeight + bottomLeftHeight;
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      canvas.width = top.width;
      canvas.height = totalHeight;
      ctx.drawImage(bottom, 0, totalHeight - bottom.height - gap, bottom.width, bottom.height);
      ctx.drawImage(top, 0, 0, top.width, top.height);
      document.body.appendChild(canvas);
    }

    const file = document.querySelector('#file');
    file.addEventListener('change', function(e) {
      const files = e.target.files;
      const pixelArray = [];
      const imgArray = [];
      const filesLength = files.length;
      [].forEach.call(files, (file) => {
        const reader = new FileReader();
        reader.onload = function (e) {
          const p = preview(e.target.result);
          const gap = 100; // 100px
          p.onload = e => {
            const {width} = e.target;
            const rowPixel = width * 4;
            const pixel = getPixel(e.target);
            pixelArray.push(pixel.data);
            imgArray.push(p);
            if (pixelArray.length == filesLength) {
              const bottom = pixelArray[0].slice(- rowPixel * gap);
              const a = bottom.join('');
              const b = pixelArray[1];
              for (var i = 0; i < b.length; i += rowPixel) {
                const clip = b.slice(i, i + gap * rowPixel);
                if (
                  clip[0] === bottom[0] && // first pixel compare
                  clip.slice(0, rowPixel).join('') == bottom.slice(0, rowPixel).join('') && // first row pixel compare
                  clip.slice(- rowPixel).join('') == bottom.slice(- rowPixel).join('') && // last row pixel compare
                  clip.join('') === a // all pixel compare
                ) {
                  console.log('match at row', i / rowPixel);
                  connectPic(imgArray[0], imgArray[1], i / rowPixel, gap);
                  break;
                }
                if (i === b.length - 1) {
                  console.log('not match');
                }
              }
            }
          }
        }
        reader.readAsDataURL(file);
      });
    });
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	</head>
	<body>
	<!-- select two pictures, and the top one first -->
	<input type="file" name="file" id="file" multiple>
	<script>
	const preview = src => {
	const img = new Image();
	img.src = src;
	return img;
	};
	const getPixel = img => {
	const canvas = document.createElement('canvas');
	const ctx = canvas.getContext('2d');
	const {width, height} = img;
	canvas.width = width;
	canvas.height = height;
	ctx.drawImage(img, 0, 0, width, height);
	return ctx.getImageData(0, 0, width, height);
	};
	const connectPic = (top, bottom, bottomAlignAtRow, gap) => {
	const topHeight = top.height;
	const bottomLeftHeight = bottom.height - bottomAlignAtRow;
	const totalHeight = topHeight + bottomLeftHeight;
	const canvas = document.createElement('canvas');
	const ctx = canvas.getContext('2d');
	canvas.width = top.width;
	canvas.height = totalHeight;
	ctx.drawImage(bottom, 0, totalHeight - bottom.height - gap, bottom.width, bottom.height);
	ctx.drawImage(top, 0, 0, top.width, top.height);
	document.body.appendChild(canvas);
	}

	const file = document.querySelector('#file');
	file.addEventListener('change', function(e) {
	const files = e.target.files;
	const pixelArray = [];
	const imgArray = [];
	const filesLength = files.length;
	[].forEach.call(files, (file) => {
	const reader = new FileReader();
	reader.onload = function (e) {
	const p = preview(e.target.result);
	const gap = 100; // 100px
	p.onload = e => {
	const {width} = e.target;
	const rowPixel = width * 4;
	const pixel = getPixel(e.target);
	pixelArray.push(pixel.data);
	imgArray.push(p);
	if (pixelArray.length == filesLength) {
	const bottom = pixelArray[0].slice(- rowPixel * gap);
	const a = bottom.join('');
	const b = pixelArray[1];
	for (var i = 0; i < b.length; i += rowPixel) {
	const clip = b.slice(i, i + gap * rowPixel);
	if (
	clip[0] === bottom[0] && // first pixel compare
	clip.slice(0, rowPixel).join('') == bottom.slice(0, rowPixel).join('') && // first row pixel compare
	clip.slice(- rowPixel).join('') == bottom.slice(- rowPixel).join('') && // last row pixel compare
	clip.join('') === a // all pixel compare
	) {
	console.log('match at row', i / rowPixel);
	connectPic(imgArray[0], imgArray[1], i / rowPixel, gap);
	break;
	}
	if (i === b.length - 1) {
	console.log('not match');
	}
	}
	}
	}
	}
	reader.readAsDataURL(file);
	});
	});
	</script>
	</body>
	</html>