Tôi có thể lấy hình ảnh từ phần tử canvas và sử dụng nó trong thẻ img src không?

Question

Có khả năng chuyển đổi hình ảnh hiện diện trong phần tử canvas thành hình ảnh đại diện bởi img src không?

Tôi cần điều đó để cắt một hình ảnh sau khi một số chuyển đổi và lưu nó. Có một chức năng xem mà tôi tìm thấy trên internet như: FileReader() hoặc ToBlop(), toDataURL(), getImageData(), nhưng tôi không biết cách triển khai và sử dụng chúng đúng cách trong JavaScript.

Đây là html của tôi:

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

Trong JavaScript nó sẽ giống như thế này:

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

Làm thế nào tôi có thể thay đổi các yếu tố canvas vào một hình ảnh img src trong kịch bản này? (Có thể có một số lỗi trong kịch bản này.)

Answer 1

canvas.toDataURL() sẽ cung cấp cho bạn một data url mà có thể được sử dụng như nguồn:

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

Xem thêm:

• MDN: canvas.toDataURL() documentation

Answer 2

Tôi đã tìm thấy hai vấn đề với Fiddle của bạn, một trong những vấn đề là đầu tiên trong câu trả lời của Zeta.

phương pháp không phải là toDataUrl(); là toDataURL(); và bạn quên lưu trữ canvas trong biến của mình.

Vì vậy, các Fiddle hiện đang làm việc tốt http://jsfiddle.net/gfyWK/12/

Tôi hy vọng điều này sẽ giúp!

Answer 3

canvas.toDataURL không hoạt động nếu URL hình ảnh gốc (tương đối hoặc tuyệt đối) không thuộc cùng một tên miền với trang web. Thử nghiệm từ một bookmarklet và một javascript đơn giản trong trang web có chứa các hình ảnh. Hãy xem David Walsh đang làm việc example. Đặt html và hình ảnh trên máy chủ web của riêng bạn, chuyển hình ảnh gốc thành URL tương đối hoặc tuyệt đối, thay đổi thành URL hình ảnh bên ngoài. Chỉ có hai trường hợp đầu tiên đang hoạt động.

Answer 4

Thực hiện việc này. Thêm phần này vào cuối tài liệu của bạn ngay trước khi bạn đóng thẻ body.

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

Tất nhiên ở đâu đó trong tài liệu của bạn, bạn cần thẻ canvas sẽ lấy.

<canvas id="yourCanvasID" /> 

Answer 5

Sửa chữa các Fiddle - cập nhật cho thấy hình ảnh đôi vào Canvas ...

Và click chuột phải có thể được lưu dưới dạng 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> 

Plus JS trên trang fiddle ...

Cheers Si

Hiện nay nhìn vào tiết kiệm này vào File trên máy chủ --- ASP.net C# (trang mẫu web .aspx) Lời khuyên nào sẽ được mát mẻ ....