使用Html5对图片加水印及多图合成

var img = new Image();
img.crossOrigin="anonymous";
img.src = "../imgs2/1.jpg";
alert("图一已经加载")
<!--图片加载完成后在绘制-->
img.οnlοad=function(){
<!--准备canvas环境-->
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
canvas.width=1063;
canvas.height=638;
// 绘制图片
ctx.drawImage(img,0,0);
// 字体及颜色
ctx.font="30px microsoft yahei";
ctx.fillStyle = "#FF0000(255,255,255,0.8)";
//文字位置
ctx.fillText("(我是数字测试)",220,370);
ctx.fillText("12345678978",250,530);

<!--html部分-->
 <div class="contentimg" >
        <img src="../imgs2/机贴1.jpg" class="imgBox" border="0" style="display:none;width:100%;height:100%;" />
        <img src="../imgs2/clipboard.png" class="imgCode" border="0" style="display:none;width:5.5rem;height:5.5rem" />
       <!--<canvas  >Your browser does not support the HTML5 canvas tag.</canvas>-->
        <div  ></div>
 </div>
<!--jquery-->
$(function() {
    //生成画布
    hecheng();
    function hecheng(){
        draw(function(){
            document.getElementById('myCanvas').innerHTML='<img src="'+base64[0]+'">';
        })
    }
    var base64=[];
    function draw(fn) {
        var imgArr = ["../imgs2/机贴1.jpg","../imgs2/clipboard.png"];
        var c = document.createElement('canvas'),
        ctx = c.getContext('2d'),
        len = imgArr.length;
        c.width = $(".contentimg").width();
        c.height = $(".contentimg").height();
        console.log(c.width,c.height);
        ctx.rect(0,0,c.width,c.height);
        ctx.fillStyle='#ccc';
        ctx.fill();
        function drawing(n) {
            if (n<len) {
                var img = new Image;
                img.src = imgArr[n];
                img.onload = function() {
                    if (n==1) {
                        var codeW = $(".imgCode").width(), codeH = $(".imgCode").height();
                        ctx.drawImage(img,94,125,codeW,codeH);
                        drawing(n+1);
                    } else {
                        ctx.drawImage(img,0,0,c.width,c.height);
                        drawing(n+1);
                    }
                }
            } else {
                base64.push(c.toDataURL("image/jpeg",0.8));
                fn();
            }
        }
        drawing(0);
    }
})

以上就是使用Html5对图片加水印及多图合成的详细内容，更多关于使用Html5对图片加水印及多图合成的资料请关注九品源码其它相关文章！