하나의 캔버스를 이미지에 복사하는 방법은 무엇입니까?

Roberval Sena 야마모토

나는 지금 책략을 위해 이것을 벤다 ... 쉬운 것 같지만 그것을 알 수 없다.

내가 올바른 질문을 할 수 없을 수도 있습니다 ...

잘,

1.이 캔버스가 있습니다.

->

var placeholder = document.querySelector('.flot-base');
var context = placeholder.getContext('2d');

그리고 하나의 "테스트 캔버스"

var c   = document.getElementById('analysisFullGraph1');
var ctx = c.getContext('2d');

"placehoder"에서 "ctx"로 복사하는 것은 괜찮습니다. 다음 함수를 만드십시오.

function copy{
    var imgData = context.getImageData(684, 0, 784, 250);
    ctx.putImageData(imgData, 100, 0);
}

=>

  1. **하지만 해당 캔버스를 다른 이미지로 복사 할 수 없습니다.

이 예와 같이 :

<html>
    <img id='analysisFullGraph1'  src="full_graphics.png" />
</html>

<script>
var placeholder = document.querySelector('.flot-base');
var context = placeholder.getContext('2d');

var imageCTX  = document.getElementById('analysisFullGraph1');

function copy{
    var imgData = context.getImageData(684, 0, 784, 250);
    imageCTX.putImageData(imgData, 100, 0);
}
</script>

제발 ... 내가 뭘 잘못하고 있니 ??

winner_joiner

전체 답변을 업데이트했습니다.

하나의 작은 부분 만 필요하면 이미지 위에있는 하나의 캔버스에서 "도우미"캔버스를 사용하고 그 위에 이미지를 하나씩 그리고 toDataUrl함수를 그릴 수 있습니다.

해결책은 다음과 같습니다.
1) 첫 번째 캔버스에
그리기 , 2) 도우미 캔버스에 큰 이미지 그리기
3) 첫 번째 캔버스의 일부 를 도우미 캔버스에 복사,
4) 도우미 캔버스에서 DataUrl을 생성하고 src속성에 설정합니다. 이미지

// A Html img can be used also instead of the Image object
var bigImage = new Image();
// image CORS PROBLEMS
bigImage.setAttribute('crossOrigin', '');
// wait for image is loaded
bigImage.onload = function bigImageLoad(){

  var drawCanvas = document.getElementById("drawCanvas");
  var helperCanvas = document.getElementById("helperCanvas");
  var drawContext = drawCanvas.getContext("2d");
  var helperContext = helperCanvas.getContext("2d");
  var outputImage = document.getElementById("outputImage");

  // Create great Image
  drawContext.fillStyle = "green";
  drawContext.fillRect( 0, 0, 50,50);

  // draw big image onto helper Canvas
  helperContext.drawImage(bigImage, 0, 0);
  
  // draw great canvas onto helper Canvas
  helperContext.drawImage(drawCanvas, 100, 50  );

  // set image URL to output Image
  outputImage.src = helperCanvas.toDataURL();
};
// Set image SRC after onload, since image might load to fast
// due to CORS broken image but for what I want to show okay
bigImage.src="http://i.imgur.com/0U4ZW.png";
// due to CORS broken image but for what I want to show okay
<b>Large Image (with canvas drawn onto it):</b><br  />
<img id="outputImage" style="width:50%" /><br  />

<!-- HIDE HELPER CANVAS -->
<canvas id="helperCanvas" style="display:none"></canvas>

<b>Draw  Canvas:</b><br  />
<canvas id="drawCanvas" ></canvas><br/>

여기서 캔버스는 DataUrl로 변환되고 태그 src속성에 할당됩니다 img.

여기 DataUrl https://de.wikipedia.org/wiki/Data-URL
및 여기 https://developer.mozilla.org/de/docs/Web/API/HTMLCanvasElement/toDataURL 함수에 대한 정보toDataUrl

이미지가 동일한 도메인에 있거나 올바른 allow-access-control-origin헤더가 설정되어 있으면 제대로 작동합니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

fabricjs 캔버스 이미지를 다른 배경 이미지에 저장하는 방법은 무엇입니까?

분류에서Dev

캔버스 호에 이미지를 삽입하는 방법은 무엇입니까?

분류에서Dev

javascript / jquery를 사용하여 3 개의 캔버스 HTML 요소를 하나의 이미지 파일로 결합하는 방법은 무엇입니까?

분류에서Dev

캔버스에 여러 이미지를 표시하는 방법은 무엇입니까?

분류에서Dev

Tkinter 캔버스 이미지를 함수에 바인딩하는 방법은 무엇입니까?

분류에서Dev

캔버스에서 이미지를 드래그하는 방법은 무엇입니까?

분류에서Dev

KineticJS : IE9에서 캔버스를 이미지로 저장하는 방법은 무엇입니까?

분류에서Dev

이미지 캔버스를 폴더에 저장하는 방법은 무엇입니까?

분류에서Dev

캔버스에서 이미지 크기를 조정하는 방법은 무엇입니까?

분류에서Dev

Android Canvas에서 전체 캔버스를 jpeg 이미지로 저장하는 방법은 무엇입니까?

분류에서Dev

캔버스의 다른 모든 콘텐츠 뒤에 이미지를 그리는 방법은 무엇입니까?

분류에서Dev

Android에서 캔버스를 사용하여 다른 이미지 안에 이미지를 추가하는 방법은 무엇입니까?

분류에서Dev

캔버스를 사용하여 한 이미지를 다른 이미지에 붙여 넣는 방법은 무엇입니까?

분류에서Dev

JavaFX 캔버스를 업데이트하는 방법은 무엇입니까?

분류에서Dev

InkCanvas를 사용하여 캔버스에서 수행 한 작업을 UWP C #의 이미지 파일에 저장하는 방법은 무엇입니까?

분류에서Dev

캔버스에서 사각형의 음수 그리기를 중지하는 방법은 무엇입니까?

분류에서Dev

캔버스 크기를 배경 이미지로 설정하는 방법은 무엇입니까?

분류에서Dev

캔버스 크기를 배경 이미지로 설정하는 방법은 무엇입니까?

분류에서Dev

오프 캔버스 이미지를 대체하는 방법은 무엇입니까?

분류에서Dev

캔버스 콘텐츠의 크기를 조정하고 이미지를 서버에 업로드하는 방법은 무엇입니까?

분류에서Dev

캔버스의 특정 요소를 지우는 방법은 무엇입니까?

분류에서Dev

Bootstrap3 : 두 개의 오프 캔버스 사이드 바를 사용하는 방법은 무엇입니까?

분류에서Dev

Windows 10에서 여러 페이지를 하나의 PDF로 스캔하는 방법은 무엇입니까?

분류에서Dev

현재 웹 페이지 상단에 캔버스 요소를 삽입하는 방법은 무엇입니까?

분류에서Dev

캔버스를 사용하여 이미지의 불투명도를 변경 한 다음 캔버스의 다른 이미지에로드하는 방법은 무엇입니까? -HTML

분류에서Dev

JavaScript를 사용하여 캔버스 끝을 칠 때 개체를 중지하는 방법은 무엇입니까?

분류에서Dev

이미지로 캔버스에 그릴 때 스트로크 위치를 수정하는 방법은 무엇입니까? typescript Angular 사용

분류에서Dev

캔버스 HTML5에서 ontouch 이벤트를 사용하는 방법은 무엇입니까?

분류에서Dev

캔버스에 이미지를 추가하고 그 위에 회전 된 텍스트를 배치하는 방법은 무엇입니까?

Related 관련 기사

  1. 1

    fabricjs 캔버스 이미지를 다른 배경 이미지에 저장하는 방법은 무엇입니까?

  2. 2

    캔버스 호에 이미지를 삽입하는 방법은 무엇입니까?

  3. 3

    javascript / jquery를 사용하여 3 개의 캔버스 HTML 요소를 하나의 이미지 파일로 결합하는 방법은 무엇입니까?

  4. 4

    캔버스에 여러 이미지를 표시하는 방법은 무엇입니까?

  5. 5

    Tkinter 캔버스 이미지를 함수에 바인딩하는 방법은 무엇입니까?

  6. 6

    캔버스에서 이미지를 드래그하는 방법은 무엇입니까?

  7. 7

    KineticJS : IE9에서 캔버스를 이미지로 저장하는 방법은 무엇입니까?

  8. 8

    이미지 캔버스를 폴더에 저장하는 방법은 무엇입니까?

  9. 9

    캔버스에서 이미지 크기를 조정하는 방법은 무엇입니까?

  10. 10

    Android Canvas에서 전체 캔버스를 jpeg 이미지로 저장하는 방법은 무엇입니까?

  11. 11

    캔버스의 다른 모든 콘텐츠 뒤에 이미지를 그리는 방법은 무엇입니까?

  12. 12

    Android에서 캔버스를 사용하여 다른 이미지 안에 이미지를 추가하는 방법은 무엇입니까?

  13. 13

    캔버스를 사용하여 한 이미지를 다른 이미지에 붙여 넣는 방법은 무엇입니까?

  14. 14

    JavaFX 캔버스를 업데이트하는 방법은 무엇입니까?

  15. 15

    InkCanvas를 사용하여 캔버스에서 수행 한 작업을 UWP C #의 이미지 파일에 저장하는 방법은 무엇입니까?

  16. 16

    캔버스에서 사각형의 음수 그리기를 중지하는 방법은 무엇입니까?

  17. 17

    캔버스 크기를 배경 이미지로 설정하는 방법은 무엇입니까?

  18. 18

    캔버스 크기를 배경 이미지로 설정하는 방법은 무엇입니까?

  19. 19

    오프 캔버스 이미지를 대체하는 방법은 무엇입니까?

  20. 20

    캔버스 콘텐츠의 크기를 조정하고 이미지를 서버에 업로드하는 방법은 무엇입니까?

  21. 21

    캔버스의 특정 요소를 지우는 방법은 무엇입니까?

  22. 22

    Bootstrap3 : 두 개의 오프 캔버스 사이드 바를 사용하는 방법은 무엇입니까?

  23. 23

    Windows 10에서 여러 페이지를 하나의 PDF로 스캔하는 방법은 무엇입니까?

  24. 24

    현재 웹 페이지 상단에 캔버스 요소를 삽입하는 방법은 무엇입니까?

  25. 25

    캔버스를 사용하여 이미지의 불투명도를 변경 한 다음 캔버스의 다른 이미지에로드하는 방법은 무엇입니까? -HTML

  26. 26

    JavaScript를 사용하여 캔버스 끝을 칠 때 개체를 중지하는 방법은 무엇입니까?

  27. 27

    이미지로 캔버스에 그릴 때 스트로크 위치를 수정하는 방법은 무엇입니까? typescript Angular 사용

  28. 28

    캔버스 HTML5에서 ontouch 이벤트를 사용하는 방법은 무엇입니까?

  29. 29

    캔버스에 이미지를 추가하고 그 위에 회전 된 텍스트를 배치하는 방법은 무엇입니까?

뜨겁다태그

보관