나는 지금 책략을 위해 이것을 벤다 ... 쉬운 것 같지만 그것을 알 수 없다.
내가 올바른 질문을 할 수 없을 수도 있습니다 ...
잘,
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);
}
=>
이 예와 같이 :
<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>
제발 ... 내가 뭘 잘못하고 있니 ??
전체 답변을 업데이트했습니다.
하나의 작은 부분 만 필요하면 이미지 위에있는 하나의 캔버스에서 "도우미"캔버스를 사용하고 그 위에 이미지를 하나씩 그리고 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] 삭제
몇 마디 만하겠습니다