Могу ли я получить изображение из элемента canvas и использовать его в теге img src?

Есть ли возможность конвертировать изображение, присутствующее в элементе canvas, в изображение, представляемое 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 = {
            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
}

Как изменить элемент canvas на img src образ в этом script? (В этом script могут быть некоторые ошибки.)

Ответ 1

canvas.toDataURL() предоставит вам URL-адрес данных, который можно использовать в качестве источника:

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

Смотрите также:

MDN: документация canvas.toDataURL()

Ответ 2

Сделайте это. Добавьте это к нижней части своего документа непосредственно перед тем, как закрыть тег тела.

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

Конечно, где-то в вашем документе вам понадобится тег canvas, который он захватит.

<canvas id="yourCanvasID" />

Ответ 3

Я нашел две проблемы с вашей скрипкой, одна из проблем - сначала в ответе Зеты.

метод не toDataUrl(); is toDataUrl();, и вы забыли сохранить холст в своей переменной.

Итак, теперь Fiddle отлично работает http://jsfiddle.net/gfyWK/12/

Надеюсь, это поможет!

Ответ 4

canvas.toDataURL не работает, если исходный URL-адрес изображения (относительный или абсолютный) не относится к тому же домену, что и веб-страница. Протестировано из букмарклета и простого javascript на веб-странице, содержащей изображения. Посмотрите на Дэвида Уолша, работающего пример. Поместите html и изображения на свой собственный веб-сервер, переключите исходное изображение на относительный или абсолютный URL-адрес, измените URL-адрес внешнего изображения. Работают только первые два случая.

Ответ 5

Исправлено обновление Fiddle - это изображение, дублируемое в Canvas...

И щелчок правой кнопкой мыши можно сохранить как .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>

Плюс JS на странице скрипки...

Приветствия Si

Теперь, глядя на сохранение этого файла на сервере --- ASP.net С# (страница веб-формы .aspx) Любые советы были бы классными....