html图片上盖章

最新推荐文章于 2024-06-10 23:30:57 发布

az44yao

最新推荐文章于 2024-06-10 23:30:57 发布

阅读量2.5k

点赞数

本文链接：https://blog.youkuaiyun.com/az44yao/article/details/100563101

版权

本文介绍使用HTML5实现图片上的盖章效果，包括jQuery插件的使用和代码示例。同时，提供了Webrtc网页录制的例子，展示如何在网页上录制视频或音频。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webrtc网页录制例子

https://www.webrtc-experiment.com/RecordRTC/simple-demos/

html 图片上盖章 jquery仿盖章效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery仿电子印章在线制作代码 - xw素材网</title>
<link href="jquery.zsign.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/jquery.zsign.js" type="text/javascript"></script>
</head>
<body>
<div id="test" style="width:595px;height:418px;border:1px solid red;margin:40px auto; position:relative;"><img src="images/asd233234.png" /></div>
<script>
var a =$("#test").zSign({ img: 'images/1.gif'});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="http://www.xwcms.net/" target="_blank">xw素材网</a></p>
</div>
</body>
</html>

html5实现对试题图片批改效果，类似盖章效果

https://blog.youkuaiyun.com/u013408979/article/details/52423410

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>测试</title>
        <link href="css/zsign.css" rel="stylesheet" type="text/css" />
        <script src="js/jquery-2.2.1.js" type="text/javascript"></script>
        <script src="js/zsign.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="test" style="position: relative; width: 80%; height: 500px; border: 1px solid red;  
        margin: 100px auto">
            <img src="img/shiti.png" />

        </div>
        <div id="imgBox" style="width:1000px;height:800px;">  </div>  
        <ul id="msg"></ul>

        <script>

           var data = []; //吧试题图片和批改图片存储
            var a = $("#test").zSign({
                img: 'img/true.png',
                wrongImg: 'img/false.png',
                isPercentage: true,
                callBack: function(obj) {

                    var dataobj2={};
                    dataobj2["img"] = "img/shiti.png";
                    dataobj2["top"] = 0;
                    dataobj2["left"] = 0;
                    data.push(dataobj2);

                    //存储批改的图片及位置
                    var html = [];
                    for (var i = 0; i < obj.length; i++) {
                        html.push('<li>img:"' + obj[i].img + '", top:"' + obj[i].top + '", left:"' + obj[i].left + '"</li>');

                        var imgurl  = obj[i].img.match(/\([^\)]+\)/g)[0];
                        imgurl = imgurl.substring(2, imgurl.length - 2);
                        var left = obj[i].left.substring(0, obj[i].left.length - 2);
                        var top = obj[i].top.substring(0, obj[i].top.length - 2);

                        var dataobj={};
                        dataobj["img"] = imgurl;
                        dataobj["top"] = parseFloat(top);
                        dataobj["left"] = parseFloat(left);     
                        data.push(dataobj);
                    }       
                    showImg();          
                    $('#msg').html(html.join(''));
                }
            });

            //合成最后的批改图片
        function showImg(){ 
            var base64=[];
            var Mycanvas=document.createElement("canvas"),  
                ct=Mycanvas.getContext("2d"),  
                len=data.length;  
                Mycanvas.width=600;  
                Mycanvas.height=400;  
                ct.rect(0,0,Mycanvas.width,Mycanvas.height);      
                ct.fillStyle='#fff';  
                ct.fill();  
                function draw(n){  
                    if(n<len){  
                        var img=new Image;  
                        img.crossOrigin = 'Anonymous'; //解决跨域  
                        img.src=data[n].img;  
                        img.οnlοad=function(){ 
                            ct.drawImage(img,data[n].left,data[n].top);  
                            draw(n+1);  
                        }  
                    }

                    else{
                        base64.push(Mycanvas.toDataURL("image/png"));  
                        document.getElementById("imgBox").innerHTML='<img src="'+base64[0]+'">';
                saveAsLocalImage (Mycanvas);        
                    }  
                }  
                draw(0)  

        }  


            //吧图片下载本地
             function saveAsLocalImage (canvas) { 
                 var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");   
                 window.location.href=image;
             }


        </script>
    </body>

</html>