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

最新推荐文章于 2025-07-08 09:26:45 发布

原创

最新推荐文章于 2025-07-08 09:26:45 发布 · 1.1w 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#js合成图片 #canvas #二维码与背景图 #canvas生成图片模糊

本文记录了一个需求，即如何利用JavaScript和Canvas将动态生成的二维码与页面背景图合并成一张图片，以便用户保存并分享到朋友圈。文中详细介绍了操作过程中需要注意的要点，主要涉及图片的base64处理和Canvas绘图。

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

收到一个需求把一个动态生成的二维码和页面背景图合并在一起供用户保存图片并分享朋友圈实现邀请好友功能(微信自己的分享很容易被封).把自己遇到需要注意的点,写下来记录一下.
用两张图片的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";    
         //背景图片  你自己本地的图片或者在