¿Puedo obtener una imagen del elemento canvas y usarla en la etiqueta img src?

¿Existe la posibilidad de convertir la imagen presente en un elemento de lienzo en una imagen representada porimg src?

Necesito eso para recortar una imagen después de alguna transformación y guardarla. Hay unas funciones de visualización que encontré en internet como:FileReader() oToBlop(), toDataURL(), getImageData(), pero no tengo idea de cómo implementarlos y usarlos correctamente en JavaScript.

Este es mi 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>

En JavaScript debería verse algo como esto:

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

¿Cómo puedo cambiar el elemento del lienzo en unaimg src imagen en este script? (Puede haber algunos errores en este script.)