Can I get image from canvas element and use it in img src tag

Question

Is there possibility to convert the image present in a canvas element into an image representing by img src   I need that to crop an image after some transformation and save it  There are a view functions that I found on the internet like  FileReader   or ToBlop    toDataURL    getImageData    but I have no idea how to implement and use them properly in JavaScript   This is my html    lt img src  http   picture jpg  id  picture  style  display none   gt   lt tr gt       lt td gt           lt canvas id  transform image  gt  lt  canvas gt       lt  td gt   lt  tr gt   lt tr gt       lt td gt           lt div id  image for crop  gt image from canvas lt  div gt       lt  td gt   lt  tr gt    In JavaScript it should look something like this     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     How can I change the canvas element into an img src image in this script   There may be some bugs in this script

User · Answer

I  ve found two problems with your Fiddle  one of the problems is first in Zeta  s answer   the method is not toDataUrl    is toDataURL    and you forgot to store the canvas in your variable   So the Fiddle now works fine http   jsfiddle net gfyWK 12   I hope this helps

User · Answer

canvas toDataURL   will provide you a data url which can be used as source  var image   new Image    image id    quot pic quot   image src   canvas toDataURL    document getElementById  image for crop   appendChild image    Complete example Here s a complete example with some random lines  The black-bordered image is generated on a  lt canvas gt   whereas the blue-bordered image is a copy in a  lt img gt   filled with the  lt canvas gt  s data url   x000D   x000D     This is just image generation  skip to DATAURL  below var canvas   document getElementById  canvas   var ctx   canvas getContext  2d        Just some example drawings var gradient   ctx createLinearGradient 0  0  200  100   gradient addColorStop  0     ff0000    gradient addColorStop  0 5     00a0ff    gradient addColorStop  1 0     f0bf00     ctx beginPath    ctx moveTo 0  0   for  let i   0  i  lt  30    i      ctx lineTo Math random     200  Math random     100     ctx strokeStyle   gradient  ctx stroke        DATAURL  Actual image generation via data url var target   new Image    target src   canvas toDataURL     document getElementById  result   appendChild target   x000D  canvas   border  1px solid black    img      border  1px solid blue     body     display  flex    div   div  margin-left  1ex    x000D   lt div gt     lt p gt Original  lt  p gt     lt canvas id  canvas  width 200 height 100 gt  lt  canvas gt   lt  div gt   lt div id  result  gt     lt p gt Result via  amp lt img amp gt   lt  p gt   lt  div gt  x000D   x000D   x000D   See also   MDN  canvas toDataURL   documentation

User · Answer

Corrected the Fiddle - updated shows the Image duplicated into the Canvas     And right click can be saved as a  PNG  http   jsfiddle net gfyWK 67    lt div style  text-align center  gt   lt img src  http   imgon net di-M7Z9 jpg  id  picture  style  display none     gt   lt br   gt   lt div id  for jcrop  gt here the image should apear lt  div gt   lt canvas id  rotate  style  border 5px double black  margin-top 5px    gt  lt  canvas gt   lt  div gt    Plus the JS on the fiddle page     Cheers Si   Currently looking at saving this to File on the server ---  ASP net C    aspx web form page   Any advice would be cool

User · Answer

Do this   Add this to the bottom of your doc just before you close the body tag    lt script gt      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  lt  script gt    Of course somewhere in your doc you need the canvas tag that it will grab    lt canvas id  yourCanvasID    gt

User · Answer

canvas toDataURL is not working if the original image URL  either relative or absolute  does not belong to the same domain as the web page  Tested from a bookmarklet and a simple javascript in the web page containing the images  Have a look to David Walsh working example  Put the html and images on your own web server  switch original image to relative or absolute URL  change to an external image URL  Only the first two cases are working

User · Answer

I m getting SecurityError  The operation is insecure  when using canvas toDataURL  image jpg    in safari browser

[javascript] Can I get image from canvas element and use it in img src tag?

Examples related to javascript

Examples related to html

Examples related to image

Examples related to canvas