js实现两张图片合成一张图片(canvas绘图,图片合成)

　

怎么把两张图片合成一张

收到一个需求把一个动态生成的二维码和页面背景图合并在一起供用户保存图片并分享朋友圈是现在邀请好友功能(微信自己的分享很容易被封).把自己遇到需要注意的点,写下来记录一下.

用两张图片的base64进行操作.

绘图代码:

$(function(){
        qcodeGenert($("#url").val());        
        var database=$('#qrcode canvas')[0];
        var dataURL = database.toDataURL();
        drawAndShareImage(dataURL);
   		 })
  function drawAndShareImage(imgBase64) {
        var wid1 = 750 * 0.29;//大 右
        var hei1 = 1334 * 0.37;//大 下
        var canvas = document.createElement("canvas");
        var context = canvas.getContext("2d"); 
        var ratio = getPixelRatio(context);  // 关键代码
        canvas.width = 750*ratio;
        canvas.height = 1334*ratio;  
        context.rect(0, 0, canvas.width*ratio, canvas.height*ratio);
        context.fillStyle = "#fff";
        context.fill(); 
        //底图
         var myImage = new Image();
         myImage.src = src="${pageContext.request.contextpath}/mobileres/${actType}/images/share/share-back11.jpg";    
         //背景图片  你自己本地的图片或者在线图片
         myImage.crossOrigin = 'Anonymous';
         myImage.onload = function () {
            context.drawImage(myImage, 0, 0, 750*ratio, 1334*ratio);
            //如果是已经生成的Img标签可以直接使用，如果是自定义的则用下面的方法手动设置src
            var myImage2 = new Image();
            myImage2.src = imgBase64;
            myImage2.onload = function () {
                context.drawImage(myImage2, wid1*ratio, hei1*ratio, 325*ratio, 345*ratio);
               var base64 = canvas.toDataURL();  //"image/png" 这里注意一下,参数里面不要带"image/png" 之前网上代码还有这个参数一直报错
                var img = document.getelementbyid('avatar');
                img.setAttribute('src', base64);
            }
        }
    }
 二维码生成代码:
 function qcodeGenert(msg){

        $("#qrcode").empty();

        $("#qrcode").qrcode({
            width: 225,
            height:225,
            text: msg                  //url
        });
    }
  /* 像素密度*/   如果没这段代码生成的图片可能会模糊,这一块也耽误了很久
    function getPixelRatio(context) {
        var backingStore = context.backingStorePixelRatio ||
            context.webkitBackingStorePixelRatio ||
            context.mozBackingStorePixelRatio ||
            context.msBackingStorePixelRatio ||
            context.oBackingStorePixelRatio ||
            context.backingStorePixelRatio || 1;
        return (window.devicePixelRatio || 1) / backingStore;
    };

文章最后发布于: 2019-06-17 12:00:45

相关阅读

js逻辑与、或、非运算规则

与&&和||不同，!操作符的行为与C、Java等语言是一致的，只返回boolean值(true或false)。 针对于!运算，0以及null、""(空字符串)、NaN、

jsp中session的用法

JSP 中Session的理解：一、Session简单介绍在WEB开发中，服务器可以为每个用户浏览器创建一个会话对象（session对象），注意：一个浏览器独占

JSP：分享当前网站到QQ好友和空间

<a href="http://connect.qq.com/widget/shareqq/index.html?url=www.baidu.com;title=%E5%85%A8%E8%83%BDVIP%E9%9F%B3%E4%B9%90

淘宝店铺点击图片收藏店铺怎么弄?

淘宝店铺点击图片收藏店铺怎么弄?很多朋友不知道淘宝店铺点击图片收藏店铺怎么弄，要知道，很多小伙伴们都在淘宝店铺点击图片收藏店

HTML5中引入JS

在页面中引入JS <script src="jquery-1.10.2.min.js" type="text/javascript"></script> HTML5中引入JS <script src="jquer