zoukankan      html  css  js  c++  java
  • canvas合成图片

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                html,body{
                    width: 100%;
                }
            </style>
        </head>
        <body>
            
            <button onclick="hec()"> 合成图片</button>
            <script>
                function hec(){
                    dataurl=ca.toDataURL("image/png");
                    console.log(dataurl)
                    var bigImg = document.createElement("img");
                    bigImg.src=dataurl;
                    bigImg.style.width=10+"%";
                    bigImg.style.height=20+"%";
                    document.body.appendChild(bigImg);
                    //document.getElementById("你的div").appendChild(bigImg);
                    //$("你的div").html(bigImg);
                }
                var dataurl;
                var img1;
                var img2;
                //var ca=document.getElementById('mycanvas');
                var ca=document.createElement("canvas");
                var ctx=ca.getContext('2d');    
                
            
                    
                
                function init(){
                    img1=new Image;
                    img2=new Image;
                    img1.setAttribute("crossorigin","Aninomous");
                    img2.setAttribute("crossorigin","Anonymous");
                    img1.src="http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLFPJR06vhs1iccMd3hFzJ3GXAFm4VljTErIq6ejH3ZicIvfz9DqKxecXkKlUsZtDYYXOo9h0icQWZDw/0"
                    img2.src="https://qnlite.gtimg.com/qqnewslite/20190924/avatar/head1.png"
                        
                    
                //var img1=document.getElementById('img1');
                //var img2=document.getElementById('img2');
                    ca.width=300;
                    ca.height=300;
                    img1.onload=function(){
                    ctx.drawImage(img1,0,0,300,300);
                    ctx.drawImage(img2,0,0,300,300);
                    
                    
                    }
                
                
                }
                init();
                
                
                
            </script>
        </body>
    </html>
  • 相关阅读:
    贪婪匹配
    洛谷P1219 [USACO1.5]八皇后 Checker Challenge【搜索回溯】
    【数据结构笔记】栈
    数据结构课堂笔记
    DAY1
    小记2020.1.10
    c++复习
    c++用流控制成员函数输出数据
    c++用控制符控制输出格式
    "中国东信杯"广西大学第二届程序设计竞赛E Antinomy与红玉海(二分)
  • 原文地址:https://www.cnblogs.com/azure-zero/p/11580058.html
Copyright © 2011-2022 走看看