zoukankan      html  css  js  c++  java
  • 图片合成技术

    .clip {
        position: absolute;
        clip: rect(0 0 0 0);
    }
    HTML代码:
    <input type="file" id="uploadFile" class="clip" accept="image/*">
    <label class="ui-button ui-button-primary" for="uploadFile">选择图片</label>
    <img id="imgCover" src="./watermark.png" class="clip">
    <p id="imgUploadX"></p>
    JS代码:
    var eleUploadFile = document.getElementById('uploadFile');
    var eleImgCover = document.getElementById('imgCover');
    var eleImgUploadX = document.getElementById('imgUploadX');
    
    if (history.pushState) {
        eleUploadFile.addEventListener('change', function (event) {
            var reader = new FileReader();
            var file = event.target.files[0] || event.dataTransfer.files[0];
            reader.onload = function(e) {
              var base64 = e.target.result;
              if (base64.length > 1024 * 50) {
                  alert('图片尺寸请小于50K');
                  return;
              } else {
                  // 使用canvas合成图片,并base64化
                  imgTogether(base64, function (url) {
                      // 尺寸
                      var size = 180 / (window.devicePixelRatio || 1);
                      // 预览
                      eleImgUploadX.innerHTML = '<img src="'+ url +'" width="'+ size +'" height="'+ size +'">';
                  });
              }
            };
            reader.readAsDataURL(file);
        });
        
        // canvas图片合成
        var imgTogether = function (url, callback) {
            var canvas = document.createElement('canvas');
            var size = 180;
            canvas.width = size;
            canvas.height = size;
    
            var context = canvas.getContext('2d');
    
            // 这是上传图像
            var imgUpload = new Image();
            imgUpload.onload = function () {
                // 绘制
                context.drawImage(imgUpload, 0, 0, size, size, 0,0, size, size);
                // 再次绘制
                context.drawImage(eleImgCover, 0, 0, size, size, 0,0, size, size);
                // 回调
                callback(canvas.toDataURL('image/png'));
            };
            imgUpload.src = url;
        };
    } else if (eleImgUploadX) {
        eleImgUploadX.className = 'remind';
        eleImgUploadX.innerHTML = '本演示IE10+下才有效果';
    }
    

      demo引用地址http://www.zhangxinxu.com/study/201705/js-canvas-image-watermark-synthesis.html

  • 相关阅读:
    SaltStack api使用
    saltstack批量管理文件和计划任务
    Kubernetes应用管理器OpenKruise之CloneSet
    Kubernetes日志系统新贵Loki-Stack
    Prometheus Operator自定义监控项
    MySQL错误修复:Table xx is marked as crashed and last (automatic?) repair failed
    kubernetes存储类与PV与PVC关系及实践
    手把手教你使用rpm部署ceph集群
    什么是dockerfile?
    RabbitMQ
  • 原文地址:https://www.cnblogs.com/yiyi17/p/8418672.html
Copyright © 2011-2022 走看看