将HTML5画布转换为IMG元素 [英] Convert HTML5 canvas to IMG element

问题描述

我想调整大小，拉伸一个HTML5画布，画布的行为就像一个IMG元素：设置width-height，像素，百分比......

我想知道是否有任何方法可以将HTML5画布转换/导出到IMG元素，或者可以直接在画布中实现。

https://i.stack.imgur.com/ZSZBr.pngalt =HTML5 CANVAS调整大小，如IMG>

我研究过Google，但它似乎互联网上没有人做过这个，或者我只是无法弄清楚......

我正在使用KineticJS库来获取详细信息。

>

请帮助我！非常感谢！首先，给你的画布一个ID（例如例子）。 ）。然后，使用普通的JavaScript，您可以创建一个基于该画布的图像并对其进行设计：

  var canvas = document.getElementById（'例如'），
 dataUrl = canvas.toDataURL（），
 imageFoo = document.createElement（'img'）; 
 imageFoo.src = dataUrl; 
 
 //在这里设计您的图片
 imageFoo.style.width ='100px'; 
 imageFoo.style.height ='100px'; 
 
 //完成样式设置后，将其附加到BODY元素
 document.body.appendChild（imageFoo）; 
  

I would like to resize, stretch an HTML5 canvas in someway that the canvas act like an IMG element: set width-height by pixel, percent...

I wonder if is there any way to convert/export an HTML5 canvas to an IMG element, or someway that can make this possible directly in canvas.

I have researched on Google, but it seem like no one on the internet have done this before, or maybe I just cannot figure out...

I'm using KineticJS library, for details.

Please help me! Thank you so much! And sorry for my bad english...

解决方案

First, give your canvas an id (e.g. example). Then, using plain JavaScript you can create an image based on that canvas and style it:

var canvas = document.getElementById('example'),
    dataUrl = canvas.toDataURL(),
    imageFoo = document.createElement('img');
imageFoo.src = dataUrl;

// Style your image here
imageFoo.style.width = '100px';
imageFoo.style.height = '100px';

// After you are done styling it, append it to the BODY element
document.body.appendChild(imageFoo);

这篇关于将HTML5画布转换为IMG元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！