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

参考链接

合成图片

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>

效果图

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

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

相关推荐

基于vue实现一个禅道主页拖拽效果

Pytorch随机数生成常用方法有哪些

仅三天，我用 GPT-4 生成了性能全网第一的 Golang Worker Pool，轻松打败 GitHub 万星项目

DJango错误日志生成

iframe分栏拖拽伸缩例子

visual 2008中error PRJ0003 : 生成 cmd.exe 时出错

python使用docxtpl生成word模板

MASA MinimalAPI源码解析：为什么我们只写了一个app.MapGet,却生成了三个接口

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

相关推荐

基于vue实现一个禅道主页拖拽效果

Pytorch随机数生成常用方法有哪些

仅三天，我用 GPT-4 生成了性能全网第一的 Golang Worker Pool，轻松打败 GitHub 万星项目

DJango错误日志生成

iframe分栏拖拽伸缩例子

visual 2008中error PRJ0003 : 生成 cmd.exe 时出错

python使用docxtpl生成word模板

MASA MinimalAPI源码解析：为什么我们只写了一个app.MapGet,却生成了三个接口

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