Czy istnieje możliwość przekonwertowania obrazu obecnego w elemencie canvas na obraz reprezentujący przezimg src?

Potrzebuję tego, aby przyciąć obraz po pewnej transformacji i zapisać go. Istnieją funkcje widoku, które znalazłem w Internecie, takie jak:FileReader() lubToBlop(), toDataURL(), getImageData(), ale nie mam pojęcia, jak wdrożyć i używać ich poprawnie w JavaScript.

To jest mój html:

<code><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>
</code>

W JavaScript powinien wyglądać mniej więcej tak:

<code>$(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
}
</code>

Jak mogę zmienić element płótna naimg src obraz w tym skrypcie? (W tym skrypcie mogą występować pewne błędy.)