Gibt es die Möglichkeit, das in einem Canvas-Element vorhandene Bild in ein Bild umzuwandeln, das durch dargestellt wird?img src?

Ich brauche das, um ein Bild nach einer Transformation zuzuschneiden und es zu speichern. Es gibt eine Ansichtsfunktion, die ich im Internet gefunden habe:FileReader() oderToBlop(), toDataURL(), getImageData(), aber ich habe keine Ahnung, wie ich sie richtig in JavaScript implementieren und verwenden soll.

Das ist mein 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>

In JavaScript sollte es ungefähr so ​​aussehen:

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

Wie kann ich das canvas Element in einimg src Bild in diesem Skript? (Dieses Skript enthält möglicherweise einige Fehler.)