캔버스 요소에서 이미지를 가져 와서 img src 태그에서 사용할 수 있습니까?

캔버스 요소에서 이미지를 가져 와서 img src 태그에서 사용할 수 있습니까?

---

캔버스 요소에있는 이미지를로 나타내는 이미지로 변환 할 가능성이 img src있습니까?

변형 후 이미지를 자르고 저장하려면 이것이 필요합니다. : 내가 좋아하는 인터넷에서 찾을 수있는 뷰 기능이있다 FileReader()거나 ToBlop(), toDataURL(), getImageData(),하지만 난 방법을 구현하는 아무 생각이 자바 스크립트에 적절하게 사용.

이것은 내 HTML입니다.

<img src="http://picture.jpg" id="picture" style="display:none"/>
<tr>
    <td>
        <canvas id="transform_image"></canvas>
    </td>
</tr>
<tr>
    <td>
        <div id="image_for_crop">image from canvas</div>
    </td>
</tr>

JavaScript에서는 다음과 같이 표시됩니다.

$(document).ready(function() {
    img = document.getElementById('picture');
    canvas = document.getElementById('transform_image');

    if(!canvas || !canvas.getContext){
        canvas.parentNode.removeChild(canvas);
    } else {
        img.style.position = 'absolute';
    }
    transformImg(90);
    ShowImg(imgFile);
}

function transformImg(degree) {
    if (document.getElementById('transform_image')) {
        var Context = canvas.getContext('2d');
        var cx = 0, cy = 0;
        var picture = $('#picture');
        var displayedImg = {
            width: picture.width(),
            height: picture.height()
        };   
        var cw = displayedImg.width, ch = displayedImg.height
        Context.rotate(degree * Math.PI / 180);
        Context.drawImage(img, cx, cy, cw, ch);
    }
}

function showImg(imgFile) {
    if (!imgFile.type.match(/image.*/))
    return;

    var img = document.createElement("img"); // creat img object
    img.id = "pic"; //I need set some id
    img.src = imgFile; // my picture representing by src
    document.getElementById('image_for_crop').appendChild(img); //my image for crop
}

img src이 스크립트에서 캔버스 요소를 이미지 로 어떻게 변경할 수 있습니까? (이 스크립트에는 몇 가지 버그가있을 수 있습니다.)

---

canvas.toDataURL()소스로 사용할 수 있는 데이터 URL 을 제공합니다 .

var image = new Image();
image.id = "pic";
image.src = canvas.toDataURL();
document.getElementById('image_for_crop').appendChild(image);

또한보십시오:

• MDN : canvas.toDataURL()문서

---

Do this. Add this to the bottom of your doc just before you close the body tag.

<script>
    function canvasToImg() {
      var canvas = document.getElementById("yourCanvasID");
      var ctx=canvas.getContext("2d");
      //draw a red box
      ctx.fillStyle="#FF0000";
      ctx.fillRect(10,10,30,30);

      var url = canvas.toDataURL();

      var newImg = document.createElement("img"); // create img tag
      newImg.src = url;
      document.body.appendChild(newImg); // add to end of your document
    }

    canvasToImg(); //execute the function
</script>

Of course somewhere in your doc you need the canvas tag that it will grab.

<canvas id="yourCanvasID" />

---

I´ve found two problems with your Fiddle, one of the problems is first in Zeta´s answer.

the method is not toDataUrl(); is toDataURL(); and you forgot to store the canvas in your variable.

So the Fiddle now works fine http://jsfiddle.net/gfyWK/12/

I hope this helps!

---

canvas.toDataURL is not working if the original image URL (either relative or absolute) does not belong to the same domain as the web page. Tested from a bookmarklet and a simple javascript in the web page containing the images. Have a look to David Walsh working example. Put the html and images on your own web server, switch original image to relative or absolute URL, change to an external image URL. Only the first two cases are working.

---

Corrected the Fiddle - updated shows the Image duplicated into the Canvas...

And right click can be saved as a .PNG

http://jsfiddle.net/gfyWK/67/

<div style="text-align:center">
<img src="http://imgon.net/di-M7Z9.jpg" id="picture" style="display:none;" />
<br />
<div id="for_jcrop">here the image should apear</div>
<canvas id="rotate" style="border:5px double black; margin-top:5px; "></canvas>
</div>

Plus the JS on the fiddle page...

Cheers Si

Currently looking at saving this to File on the server --- ASP.net C# (.aspx web form page) Any advice would be cool....

참고URL : https://stackoverflow.com/questions/10257781/can-i-get-image-from-canvas-element-and-use-it-in-img-src-tag