小编kas*_*rek的帖子

是否有可能将画布元素中存在的图像转换为表示的图像img src？

我需要在转换后裁剪图像并保存.还有,我发现在互联网上像一个视图功能:FileReader()或者ToBlop(),toDataURL(),getImageData(),但我不知道如何实现,并在JavaScript中正确地使用它们.

这是我的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 = { …