从html的一部分创建一个png [英] creating a png from a part of html

问题描述

我有几个输入字段将被用户填充。此外，我有一个字段，显示当前时间和用户选择的图像。我把一切都包装在< div id =container> 现在我想在用户点击按钮时将这个div保存为.png。

这是最好的方法是什么？

我在想画布中的一切，但我不知道这是可能还是一个好的方法。
我尝试在这里设置在canvas元素中输入表单

但输入甚至不在画布中，所以当我下载画布作为图片输入不在其中。

任何人都能指向正确的方向？

谢谢！

解决方案

快速且肮脏的演示：

如何注释和为所点击的图片添加时间戳，然后让用户将其保存在本地：

  var canvas = document.getElementById ; var ctx = canvas.getContext（2d）; var cw = canvas.width; var ch = canvas.height; var currentImg，currentText; draw（）; $（'img'）。 ，function（）{currentImg = this; draw（）;}）; // $（'＃text'）。on（'keyup'，function（e）{currentText =（$（this）.val draw（）;}）; // $（'＃save'）。click（function（）{$（'< br>右键单击下面的图像来保存< br>'）appendTo（'body' ）; $（'< img />'，{src：canvas.toDataURL（），}）.addClass（'withBorder'）.appendTo（'body'）;}）; function draw（）{ctx.clearRect （0,0，cw，ch）; ctx.fillText（new Date（），5,20）; if（currentText）{ctx.fillText（currentText，5,35）; } if（currentImg）{ctx.drawImage（currentImg，0,50）; }}  

  body {background-color：ivory; } #canvas {border：1px solid red; margin：0 auto; } .withBorder {border：1px solid blue;}  

  ; script src =https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js>< / script>< h4>点击您选择的汽车< / h4>< img crossOrigin ='anonymous'src ='https：//dl.dropboxusercontent.com/u/139992952/multple/car1.png'>< img crossOrigin ='anonymous'src ='https： /dl.dropboxusercontent.com/u/139992952/multple/car2.png'><br>Comment:&nbsp;<input type ='text'id = text>< br>< canvas id = canvaswidth = 300 height = 100>< / canvas>< br>< button id ='save'> Save< / button>  

div>

I have a couple of input fields which will get populated by users. Additionally, I have a field that displays the current time and an image that gets chosen by the user. I packed everything in a <div id="container"> Now I want to save this div as a .png when the user hits a button.

What's the best way to do this?

I was thinking of drawing everything in canvas but I am not sure if that is possible or a good way. I tried this set up here Input form inside canvas element

but the input is not even in the canvas, so when I download the canvas as a picture the input is not in it.

Can anyone point me in the right direction?

Thanks !

解决方案

A Quick and Dirty Demo:

How to annotate and timestamp a clicked image and then let the user save it locally:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var currentImg,currentText;

draw();

$('img').on('click',function(){
  currentImg=this;
  draw();
});

//
$('#text').on('keyup',function(e){
  currentText=($(this).val());
  draw();
});

//
$('#save').click(function(){
  $('<br>Right-Click the image below to save it<br>').appendTo('body');
  $('<img />',{
    src:canvas.toDataURL(),
  })
  .addClass('withBorder')
  .appendTo('body');
});


function draw(){
  ctx.clearRect(0,0,cw,ch);
  ctx.fillText(new Date(),5,20);
  if(currentText){ ctx.fillText(currentText,5,35); }
  if(currentImg){ ctx.drawImage(currentImg,0,50); }
}

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }
.withBorder{border:1px solid blue;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Click on a car of your choice</h4>
<img crossOrigin='anonymous' src='https://dl.dropboxusercontent.com/u/139992952/multple/car1.png'>
<img crossOrigin='anonymous' src='https://dl.dropboxusercontent.com/u/139992952/multple/car2.png'>
<br>
Comment:&nbsp;<input type='text' id=text>
<br>
<canvas id="canvas" width=300 height=100></canvas>
<br>
<button id='save'>Save</button>

这篇关于从html的一部分创建一个png的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！