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

问题描述

是否有可能将画布元素中存在的图像转换为由 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">来自画布的图像</div></td></tr>

在 JavaScript 中它应该是这样的:

$(document).ready(function() {img = document.getElementById('图片');canvas = document.getElementById('transform_image');if(!canvas || !canvas.getContext){canvas.parentNode.removeChild(canvas);} 别的 {img.style.position = '绝对';}变换图像(90)；ShowImg(imgFile);}函数transformImg(度){如果(document.getElementById('transform_image')){var Context = canvas.getContext('2d');无功 cx = 0, cy = 0;var 图片 = $('#picture');var displayImg = {宽度:图片宽度()，高度:图片.高度()};var cw =displayedImg.width, ch =displayedImg.heightContext.rotate(degree * Math.PI/180);Context.drawImage(img, cx, cy, cw, ch);}}函数 showImg(imgFile) {如果 (!imgFile.type.match(/image.*/))返回;var img = document.createElement("img");//创建 img 对象img.id = "图片";//我需要设置一些idimg.src = imgFile;//我的图片由 src 表示document.getElementById('image_for_crop').appendChild(img);//我的裁剪图像}

如何在此脚本中将画布元素更改为 img src 图像?(此脚本可能存在一些错误.)

解决方案

canvas.toDataURL() 将为您提供.

//这只是图像生成，跳到DATAURL:下面var canvas = document.getElementById("canvas")var ctx = canvas.getContext("2d");//只是一些示例图var 渐变 = 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 (让 i = 0; i <30; ++i) {ctx.lineTo(Math.random() * 200, Math.random() * 100);}ctx.strokeStyle = 渐变；ctx.stroke();//DATAURL: 通过数据url实际生成图片var target = new Image();target.src = canvas.toDataURL();document.getElementById('result').appendChild(target);

canvas { 边框:1px 纯黑色；}img { 边框:1px 纯蓝色；}身体{显示:弹性；}div + div {margin-left: 1ex;}

<p>原文:</p><canvas id="canvas" width=200 height=100></canvas>
<div id="结果"><p>通过&lt;img>的结果:</p>

另见:

• MDN:canvas.toDataURL() 文档

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

Complete example

Here's a complete example with some random lines. The black-bordered image is generated on a <canvas>, whereas the blue-bordered image is a copy in a <img>, filled with the <canvas>'s data url.

// 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 < 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);

canvas { border: 1px solid black; }
img    { border: 1px solid blue;  }
body   { display: flex; }
div + div {margin-left: 1ex; }

<div>
  <p>Original:</p>
  <canvas id="canvas" width=200 height=100></canvas>
</div>
<div id="result">
  <p>Result via &lt;img&gt;:</p>
</div>

See also:

• MDN: canvas.toDataURL() documentation

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