사례 :

나는 2 개의 iframe을 가지고 있으며 둘 다 많은 div와 다른 컨트롤을 가지고 있으므로 두 iframe 모두 HTML 웹 사이트의 중간 크기와 같습니다. 둘 다 비교하고 차이점을 찾고 싶습니다.

나는 여기에 다른 옵션을 생각했다.

해결 방법 1 : 2 iframe의 전체 스크린 샷을 찍고 스크린 샷의 불일치 영역에 그리드를 그리는 Python 베개 라이브러리를 사용하여 두 스크린 샷을 비교하십시오. 그러나 여기서 문제는 인터넷에서 전체 iframe 스크린 샷을 찍을 수있는 코드를 찾지 못했다는 것입니다 ( 스크롤 막대가있는 긴 iframe이 있습니다 ). 나는 거의 모든 답변을 시도했지만 모두 정상적인 페이지에서는 작동하지만 iframe에서는 작동하지 않습니다.

참조 : https://blog.rinatussenov.com/automating-manual-visual-regression-tests-with-python-and-selenium-be66be950196

해결 방법 2 : iframe에서 HTML 코드를 모두 가져 와서 비교하지만 결과는 2 iframe에서 다르거 나 일치하지 않는 일부 HTML 코드를 찾기 때문에 결과를 분석하기가 쉽지 않습니다. 이것은 텍스트 비교와 비슷하지만 내가 생각하는 좋은 해결책은 아닙니다.

그래서 파이썬 또는 Javascript를 사용하여 iframe의 전체 스크린 샷을 찍을 수있는 코드 또는 2 개의 iframe을 비교하고 차이점을 찾을 수있는 더 나은 옵션을 찾고 있습니다.

Google이 아래에서 찾은 거의 모든 답변을 시도했습니다.

전체 HTML이 iframe 내에있는 샘플 Iframe이 여기에 제공됩니다 : https://grapesjs.com/demo.html , 일부 코드 가이 iframe의 전체 스크린 샷을 찍을 수 있다면 나에게 비교하기 쉽습니다.

답변

html2canvas(document.getElementById("img_dots")).then(
  function (canvas2) {
    var img_data2 = canvas2.toDataURL('image/png');
    var im_data2 = img_data2.replace('data:image/png;base64,', '');
    $.ajax({
      type: "POST",
      url: "send_image_to_backend",
      data: {
        "base64data": im_data2,
        // "filename": filename.split(".")[0]
        "filename": new_filename + ".png"
      }, success: function () {
         //send second image and compare
      }
    });
  }
);