Question

我用javascript, html, css建立了一个图标，该图标包含了图片，文字，请问怎么把这个图标变成png

请问怎么把这个图片变成png或者jpeg的格式，并且允许用户下载该图标当前表示我图标的代码如下：sizeInput 是指按钮大写，可以是btn-sm 或者 btn-lgcusInput 就是图片路径或者urltextInput 就是输入的文字style就是图标的形状 比如现在我的sizeInput 是 btn-lg， cusInput是向下箭头，textInput 是 ”你好“，style 是30px; 那我得到的图标是： （背景是绿色的图标） 怎么让用户下载该图片到自己的电脑上并且该图标的格式必须为png或者jpeg? 最好用javascript, html, css搞定，实在不行，用其他的语言也可以。谢谢！！





Answer 1

下面是我写的一个例子，你先研究研究：

<div id="div" style="width:100px; height:100px; line-height:100px; text-align:center; color:#f00; background-color:#cab; overflow:hidden; border-radius:10px">呵呵</div>
<input type="button" value="转为图片" onclick="div2png();"/>
<div id="png"></div>
<script>
function div2png(){
   var div = document.getElementById("div").outerHTML;  
   var img = new Image();
   img.src = "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><foreignObject width='100%' height='100%'><div xmlns='http://www.w3.org/1999/xhtml'>"+div+"</div></foreignObject></svg>";
   img.onload=function(){
      var canvas = document.createElement("canvas");
      canvas.width = 100;
      canvas.height = 100;
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0);
      img.src = canvas.toDataURL("image/png");
   }
   document.getElementById("png").appendChild(img);
}
</script>

追问

非常感谢您的回答！！！

我还有问题：

最重要的是这个：我的图标包括图片和文字。我试着把这图标转换成图片，可是不成功，请问怎么解决。第一/二张图：代码；第三张图：图标里的图片。第四张图：图标 （我想把它变成图片）。

还有一问：有直接把图片格式变成jpg的方法吗？比如说图5， Save as type中直接是jpg image,用户不需要在file name 中手动输入download.jpg

Answer 2

用canvas去绘图 自带的api能满足要求