欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

js实现拖拽合成两张图片和文字，并包括 即时生成的二维码

程序员文章站 2022-03-25 11:35:24
参考链接合成图片https://blog.csdn.net/qq_43789643/article/details/107461585 主要参考https://blog.csdn.net/weixin_39927850/article/details/108282039 —Html5 Canvas生成淘宝客海报https://blog.csdn.net/u013239233/article/details/70210755https://www.17sucai.com/preview/1...

参考链接

合成图片

https://blog.csdn.net/qq_43789643/article/details/107461585 主要参考
https://blog.csdn.net/weixin_39927850/article/details/108282039 —Html5 Canvas生成淘宝客海报
https://blog.csdn.net/u013239233/article/details/70210755
https://www.17sucai.com/preview/1/2017-04-12/QRCode/index.html
https://www.17sucai.com/pins/32974.html
https://blog.csdn.net/z5976749/article/details/86147543
https://blog.csdn.net/qq285679784/article/details/88398851 —H5自定义生成海报

qrcode.js   生成二维码

https://blog.csdn.net/qq_35704550/article/details/94412617 解决在页面中无法获取qrcode.js生成的base64的图片

https://blog.csdn.net/longhuaiwen_1991/article/details/103404655
https://www.cnblogs.com/ecmasea/p/9565913.html

https://blog.csdn.net/qq_38702697/article/details/83689001

其中用到了
html2canvas将HTML页面转为图片并保存
----------- https://blog.csdn.net/anni1107qf/article/details/83656071

$("#toImg").click(function(){
	html2canvas($("#wrapper")[0]).then(function(canvas){
		var imgUri = canvas.toDataURL();
		$("body").append('<a href="'+imgUri+'" download="下载的图片">保存图片</a>');
	})
})

我的

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>二维码生成</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link type="text/css" href="https://www.17sucai.com/preview/1/2017-04-12/QRCode/bootstrap.min.css" rel="stylesheet">       

<script src="https://www.17sucai.com/preview/1528155/2019-04-09/ewm/js/jquery.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>  <!--加载jquery ui主要作用是使用其拖拽的功能-->
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script><!--想要图片合成，核心就是加载使用这个插件-->
<script src="https://www.17sucai.com/preview/1/2017-04-12/QRCode/js/modernizr-2.8.3.js" type="text/javascript"></script>
<script src="https://www.17sucai.com/preview/1/2017-04-12/QRCode/js/bootstrap.min.js" type="text/javascript"></script>    
<script type="text/javascript" src="https://www.17sucai.com/preview/1/2017-04-12/QRCode/js/qrcode.min.js"></script>
<link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">

<style>
    *{
      margin:0;
      padding:0;
    }
    body{
    /*background-color: #262626;       */
    }
    #box{
      width:1000px;
      height:600px;
      margin:30px auto;
    }
    #box .qrcode{
      width:400px;
      height: 400px;
      float: left;
      margin: 40px 40px;
    }
    #box .introduce{
      width:500px;
      height: 600px;
      float: left;
      margin: 30px auto;
    }
    .introduce p{
      width:440px;
      height: 40px;
      background: #333; 
      /* 有下面这行，即input框 排一行*/
      /*float: left;*/
      margin:10px 20px;
      color:#fff;
      border-radius: 5px;
      overflow: hidden;
    }
    .introduce p span{
      float: left;
      width:80px;
      height:40px;
      color:#fff;
      text-align: center;
      line-height: 40px;
    }
    .introduce p input{
      width:360px;
      height:40px;
      float: left;
      border: 0;
      color:#fff;
      background:#000;
      text-indent:10px; 
      outline: none;
    }
    .introduce .btn{
      width:440px;
      height:40px;
      text-align: center;
      line-height: 30px;
      background: #6c0;
    }
    .qrcode>img{
      display: block;border:5px solid white;
    }
	</style>
	</head>
<body>

<div class="form-group form-group-sm" style="display:none;">
    <div class="col-md-10">
      <div id="qrcode"></div>
    
    </div>
</div>

<div id="box">
    <!-- 下面是原生成的二维码位置 -->
    <!-- <div class="qrcode" id="qrcode"></div> -->
    <div class="qrcode">
      <span class="whole" style="width: 300px;display: inline-block;position: relative;">
          <img id="baseimg" style="width:100%;height:auto;"  >
          <!-- 填充的二维码 -->
          <div style="height: 100%;width: 100%;top:0;position: absolute;overflow: hidden;">
              <div class="drg" style="position: absolute;width:100px;top: 0px;left: 0px;display: inline-block;">
                  <img id="styleimg"  style="width:100%;cursor: pointer;" >
              </div>
          </div>
      <div id="dragsource" style="height:100%;width:100%;top:10%;position:absolute;overflow: hidden;text-align: center;"> 
          <p id="styletext"></p> 
      </div> 

  </span>
</div>

<div class="introduce">
  <p>
    <span>推广链接：</span>
    <!-- <input type="text" id="t_url" value="李老板伐木有限公司"> -->
    <input type="text" id="urlContent" name="urlContent" required disabled="disabled" lay-verify="required" placeholder="https://www.baidu.com/" autocomplete="off" class="layui-input">
  </p>

  <p>
    <span>提示文案：</span>
    <input type="text" id="txtContent"  name="txtContent" required  lay-verify="required" placeholder="请书写提示文案" autocomplete="off" class="layui-input">
  </p>

  <p class="btn" onClick="down();">保存图片</p>
</div>

</div>

<script type="text/javascript">
    // 设置 qrcode 参数
    var qrcode = new QRCode('qrcode', {
        text: 'https://www.baidu.com/',
        width: 80,
        height: 80,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
    });
   
    var canvas = $('#qrcode').find('canvas').get(0);
    var img_url = canvas.toDataURL();                    // 参考  https://blog.csdn.net/longhuaiwen_1991/article/details/103404655
    console.log('打印二维码链接');
    // console.log(img_url);

    // <!-- 想要图片拖拽合成，核心就是加载使用这个插件-->
    // https://blog.csdn.net/qq_35704550/article/details/94412617     安卓手机可能效果不好，

    $("#styleimg").attr("src",img_url);
    $("#baseimg").attr("src",'/app/test1.png');

    // $( ".drg" ).draggable();//这里使用jquery ui的拖拽方法  draggable()；作用是可以让图片2进行拖拽
    $( "#styleimg" ).draggable();
    
    // 提示文案
    var flag = false;
    $('#txtContent').on('input', function () {
       // if (!flag) 
       //      console.log($(this).val());
    }).on('compositionstart', function () {
          flag = true;
          // console.log('输入法，录入开始');
    }).on('compositionend', function () {
          flag = false;
          var stext = $("#txtContent").val();
          // console.log('输入法，输入结束');
          $("#styletext").html(stext);
          $("#styletext" ).draggable();
    });



    function down(){//这个函数是点击下载执行的方法
        html2canvas($(".whole"),{ //这是使用了html2canvas这个插件的方法，将class为whole的整个节点绘制成画布
          onrendered:function(canvas){  //画布绘制完成后执行下面内容，function内的canvas这个参数就是已经被绘制成画布
              var link = document.createElement('a');//创建一个a标签
              link.download = 'my-image-name.jpg';//a标签增加一个download属性，属性值（my-image-name.jpg）就是合成下载后的文件名
              // link.href = canvas.toDataURL();
              link.href = canvas.toDataURL("image/jpeg", 0.8);//canvas.toDataURL()就是画布的路径，将路径赋给a标签的href
              // console.log('下面打印保存的图片地址');
              // console.log(link.href);
              link.click();//模拟a标签被点击，这样就可以下载了
              
// 把canvasbase64图片转换成文件对象，并上传到服务器
// var myfile = dataURLtoFile(link.href, Date.now()+'.png');
// console.log(myfile);

        // 同时请求 ajax 下载图片到本地，存入数据库
        var tname = {!!json_encode($tname)!!};    // 控制器传过来的数据
        console.log(tname);
        $.ajax({
            headers: {
              'X-CSRF-TOKEN':$('meta[name="csrf-token"]').attr('content'),
              'Authorization':tname
            },
            url: "../../download/propage/agm?tname="+tname,
            type: 'post',
            // data: {url: myfile},
            data: {url: link.href},
            success: function(msg) {
              if (msg.status == 200) {
                // alert('保存图片成功');
              } else {
                
              }
            }
        });




          },
        });

        
    }




    // // 把base64 转换成文件对象
    // function dataURLtoFile(base64Str, fileName) {
    //     var arr = base64Str.split(','),
    //     mime = arr[0].match(/:(.*?);/)[1], //base64解析出来的图片类型
    //     bstr = atob(arr[1]), //对base64串进行操作，去掉url头，并转换为byte   atob为window内置方法
    //     len = bstr.length,
    //     ab = new ArrayBuffer(len), //将ASCII码小于0的转换为大于0
    //     u8arr = new Uint8Array(ab); //
    //     while (len--) {
    //         u8arr[len] = bstr.charCodeAt(len)
    //     };
    //     // 创建新的 File 对象实例[utf-8内容，文件名称或者路径，[可选参数，type：文件中的内容mime类型]]
    //     return new File([u8arr], fileName, {
    //         type: mime
    //      })
    // };


function dataURLtoFile(dataurl, filename) { //将base64转换为文件
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {type:mime});
}



</script>


</body>
</html>

效果图
js实现拖拽合成两张图片和文字，并包括 即时生成的二维码

本文地址：https://blog.csdn.net/qq_39835505/article/details/109264125

相关标签： js合成图片 1024程序员节

上一篇： vue 解决data中定义图片相对路径页面不显示的问题

下一篇： 详解解读在vue项目中引入elementUI组件

推荐阅读