我可以从canvas元素获取图像，并在img src标签中使用它吗？ [英] Can I get image from canvas element and use it in img src tag?

问题描述

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

我需要在一些变换后裁剪图像并保存。有一个我在互联网上找到的视图函数： FileReader（）或 ToBlop（）， toDataURL（）， getImageData（），但我不知道如何在JavaScript中正确实现和使用它们。

这是我的html：

 < img src =http：// picture.jpgid =picturestyle =display：none/> 
< tr> 
< td> 
< canvas id =transform_image>< / canvas> 
< / td> 
< / tr> 
< tr> 
< td> 
< div id =image_for_crop>图片从画布< / 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 b $ b 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; //我需要设置一些id 
 img.src = imgFile; //我的图片由src 
 document.getElementById（'image_for_crop'）表示appendChild（img）; //我的作物图像
} 
  

如何将canvas元素更改为 img src 在这个脚本中的图像？ （此脚本中可能有一些错误。）

解决方案

canvas.toDataURL c $ c>将为您提供数据网址，可用作来源：

  var image = new Image（）; 
 image.id =pic
 image.src = canvas.toDataURL（）; 
 document.getElementById（'image_for_crop'）。appendChild（image）; 
  

另请参阅：

• MDN： canvas.toDataURL ） example

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:

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

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

解决方案

canvas.toDataURL() will provide you a data url which can be used as source:

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

See also:

• MDN: canvas.toDataURL() example

这篇关于我可以从canvas元素获取图像，并在img src标签中使用它吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！