用html创建canvas画布生成图片-木庄网络博客

本文摘自PHP中文网，作者墨辰?R，侵删。

本篇文章主要介绍如何用html创建canvas画布生成图片，感兴趣的朋友参考下，希望对大家有所帮助。

1，在html里新建canvas画布

/**要生成图片的html*/<p class="con_1">
    <p class="con_1_5">
        <span class="title_des2">思路惊奇</span>
        <span class="title_des3">思路惊奇</span>
    </p>
    <img class="con_1_1" src="style/ActiveCDN/bonus/page7_1.png" alt="">
    <img class="con_1_2" src="style/ActiveCDN/bonus/page7_1.png" alt="">
</p>/*生成的canvas和最终生成的图片*/<p class="shareImg">
    <canvas id="canvas" width="750" height="1206"></canvas>
    <img src="" alt="">
</p>

//设置canva画布大小，这里会把画布大小设置为2倍，为了解决生成图片不清晰的问题，需要注意接下来所有的函数都是在html2canvas这个对象里定义的
var html2canvas={
    canvas:document.getElementById("canvas"),
    ctx:canvas.getContext("2d"),
    saveImage:function(){
          this.canvas.width=windowPro.innerWidth*2;
          this.canvas.height=windowPro.innerHeight*2-4.8*bastFontSize;
          this.ctx.fillStyle="#0c3e78";
          this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height);
    }
}

2，将要生成的图片的dom元素载入canvas中，

一般我们想生成图片的时候，dom元素基本上由图片和文字组成，想一些效果之类的是不适合生成图片的。
a，获取要加载到canvas的图片

domArray:[$(".con_1_1"),$(".con_1_2")],//要加载的图片元素列表
imgArrayLoad:function(){
       var that=this,domArray=this.domArray;        for(var i=0,len=domArray.length;i<len;i++){
           (function(){
           //循环出所有图片元素，一个个图片添加
               that.addImgToCanvas(domArray[i],that.imgAllLoad);
           }())
       }
   },

b，获取每个图片元素的在页面上大小，距离顶部地步距离，然后绘制到canvas相应的位置
这里图片大小和距离也是取得2倍，原因是解决生成的图片不清晰。

addImgToCanvas:function(obj,fn){      var width=obj.width()*2,//图片在网页宽度
        height=obj.height()*2,//图片在网页高度
        x=obj[0].x*2,//图片距离网页最顶部距离
        y=obj[0].y*2,//图片距离网页最右边距离
        img=new Image(),
        that=this,
        src=obj.attr("src");
        img.src=src;
        img.onload=function(){           //把图片绘制到canvas上
            that.ctx.drawImage(obj[0],x,y,width,height);上
            that.loadImgNum++;              if(fn && typeof fn === "function")fn(that.loadImgNum);               /**位置1**/
 
        }
},