8°

移动端保存当前屏幕内容为图片,canvas图片拼接

需求:1、移动端点击分享时,截屏当前屏幕,并保存为图片  2、将截屏的图片与一张二维码图片进行拼接后,生成一张新的图片

技术栈:html2canvas.js、canvas2image.js

代码:(jquery和原生js混写了,不是很规范)

<script type="text/javascript">
  //获取页面中的分享按钮
  var sharebtn = document.querySelectorAll('.share');
    for(let i=0;i<sharebtn.length;i++){
        //给分享按钮添加touch事件
        sharebtn[i].ontouchend = function(){
            //html2canvas语法,截取当前屏幕h5转为canvas
          html2canvas(document.body).then(canvas => {
                document.body.appendChild(canvas);
                var canvasbox = document.getElementsByTagName('canvas')[0];
              var w = canvasbox.width,h = canvasbox.height;
              //canvas转化为图片并添加到body中,以便于第二次图片拼接时获取该图片
                var img = Canvas2Image.convertToPNG(canvas, w, h);
                img.id = 'img1';
                document.body.appendChild(img)
            </span><span style="color: #008000;">//</span><span style="color: #008000;">创建新画布并添加到body中</span>
            <span style="color: #0000ff;">var</span> canvasel = document.createElement('canvas'<span style="color: #000000;">);
            canvasel.id </span>= 'mycanvas'<span style="color: #000000;">;
            canvasel.width </span>= 750<span style="color: #000000;">;
            canvasel.height </span>= 1654<span style="color: #000000;">;
            document.body.appendChild(canvasel);
            
            </span><span style="color: #008000;">//</span><span style="color: #008000;">当截屏的图片加载完成后,执行该方法</span>
            img.onload = <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                </span><span style="color: #008000;">//</span><span style="color: #008000;">获取新画布</span>
                <span style="color: #0000ff;">var</span> mycanvas = document.getElementsByTagName('canvas')[1<span style="color: #000000;">];
               </span><span style="color: #0000ff;">var</span> w = mycanvas.width,h =<span style="color: #000000;"> mycanvas.height;
                </span><span style="color: #0000ff;">var</span> ctx = mycanvas.getContext('2d'<span style="color: #000000;">);
                </span><span style="color: #008000;">//</span><span style="color: #008000;">创建需要拼接的二维码图片</span>
                <span style="color: #0000ff;">var</span> lastimg = <span style="color: #0000ff;">new</span><span style="color: #000000;"> Image();
                lastimg.src</span>='image/ewm.png';
                <span style="color: #008000;">//</span><span style="color: #008000;">获取截屏的图片</span>
                <span style="color: #0000ff;">var</span> img1 = document.getElementById('img1'<span style="color: #000000;">);
                </span><span style="color: #008000;">//</span><span style="color: #008000;">当二维码图片加载完成后执行:</span>
                lastimg.onload = <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                    </span><span style="color: #008000;">//</span><span style="color: #008000;">在新的canvas中绘制两张图片并将该canvas转化为图片</span>
                    ctx.drawImage(img1,0,0<span style="color: #000000;">);
                    ctx.drawImage(lastimg,</span>0,1334<span style="color: #000000;">);
                    </span><span style="color: #0000ff;">var</span> newimg =<span style="color: #000000;"> Canvas2Image.convertToPNG(mycanvas,w,h);
                    </span><span style="color: #008000;">//</span><span style="color: #008000;">将图片添加到页面的结构中 并显示该结构</span>
                    document.getElementById('imgbox'<span style="color: #000000;">).appendChild(newimg);
                    $(</span>'.img-show-wrap').removeClass('hide'<span style="color: #000000;">);
                    $(</span>'.mask').removeClass('hide'<span style="color: #000000;">);
                }
            }
      })
      }
}

</script>

本文转载自博客园,原文链接:https://www.cnblogs.com/javascripter/p/12190423.html

全部评论: 0

    我有话说: