上传base64 分享图 - Githubissues

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <script src="//cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
    <script src="./js/lutils.full.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/flyio/dist/fly.min.js"></script>
    <script src="./js/fly.config.js"></script>
    <script src="./js/html2canvas.min.js"></script>
    <script src="./js/canvas2image.js"></script>
  </head>

  <body>
    <div id="app" class="member pb50" :class="{block:block}">

      <div ref="qrcode" class="share">
        <img class="share-background" src="./img/bg.png" @load="imageLoaded" />
        <img class="share-qrcode" src="./img/qrcode.png" @load="imageLoaded" />
      </div>
      <van-popup v-model="show">
        <div style="width: 100vw;" @click="getQrcode">
          <img v-if="info.qrcode" :src="info.qrcode" />
        </div>
      </van-popup>
    </div>

    <script>
      let Main = {
        data() {
          return {
            block: false,
            info: {
              qrCode: ''
            },
            show: false,
            imgLoaded: 0
          };
        },
        created() {
          this.block = true;
        },
        mounted() {},
        methods: {
          getQrcode() {
            this.show = !this.show;
          },
          imageLoaded() {
            this.imgLoaded++;
            if (this.imgLoaded >= 2 && !this.info.qrcode) {
              this.convert2canvas(false);
            }
          },
          uploadQrcode(dataUrl, status) {
            let that = this;
            this.$http
              .post('', { file: file }, { formData: true })
              .then(function(res) {
                that.info.qrcode = res.data;
                that.$toast.clear();
                if (status) {
                  that.getQrcode();
                }
              })
              .catch(function() {
                that.$toast.clear();
              });
          },

          convert2canvas(status) {
            let that = this;
            let cntElem = that.$refs.qrcode;
            let shareContent = cntElem; //需要截图的包裹的（原生的）DOM 对象
            let width = shareContent.offsetWidth; //获取dom 宽度
            let height = shareContent.offsetHeight; //获取dom 高度
            let canvas = document.createElement('canvas'); //创建一个canvas节点
            let scale = 2; //定义任意放大倍数 支持小数
            canvas.width = width * scale; //定义canvas 宽度 * 缩放
            canvas.height = height * scale; //定义canvas高度 *缩放
            canvas.getContext('2d').scale(scale, scale); //获取context,设置scale
            let opts = {
              scale: scale, // 添加的scale 参数
              canvas: canvas, //自定义 canvas
              // logging: true, //日志开关，便于查看html2canvas的内部执行流程
              width: width, //dom 原始宽度
              height: height
              //useCORS: true // 【重要】开启跨域配置
            };

            html2canvas(shareContent, opts).then(function(canvas) {
              let context = canvas.getContext('2d');
              // 【重要】关闭抗锯齿
              context.mozImageSmoothingEnabled = false;
              context.webkitImageSmoothingEnabled = false;
              context.msImageSmoothingEnabled = false;
              context.imageSmoothingEnabled = false;

              // 【重要】默认转化的格式为png,也可设置为其他格式
              let img = Canvas2Image.convertToJPEG(canvas, canvas.width, canvas.height);
              console.log(img);
              // that.info.qrcode = img.src
              that.uploadQrcode(img.src, status);
              // that.$toast.clear()
              // that.getQrcode()
            });
          }
        }
      };
      let Ctor = Vue.extend(Main);
      new Ctor().$mount('#app');
    </script>
  </body>
</html>

    /**
     * 上传二维码图
     */

    public function uploadShare()
    {
        $model = M('User');
        //$this->ajaxReturn(I('post.share'));
        $res = $this->saveBase64Image(I('post.share'));
        if ($res['code'] == 0) {
            $user_id = $_SESSION['Home']['user_id'];
            $dataa['erweima_img'] = $res['image_url'];
            $dataa['update_time'] = time();
            $cc = $model->where('user_id = ' . $user_id)->save($dataa);
            if ($cc) {
                $this->ajaxReturn($res['image_url']);
            }
        }
    }

    /**
     * 封装base64位图片上传
     */
    function saveBase64Image($base64_image_content)
    {

        if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)) {
            //图片后缀
            $type = $result[2];
            if ($type == 'jpeg') {
                $type = 'jpg';
            }

            //保存位置--图片名
            $image_name = date('His') . str_pad(mt_rand(1, 99999), 5, '0', STR_PAD_LEFT) . "." . $type;
            $image_url = '/Public/uploads/' . date('Ymd') . '/' . $image_name;
            if (!is_dir(dirname('./' . $image_url))) {
                mkdir(dirname('./' . $image_url));
                chmod(dirname('./' . $image_url), 0777);
                umask($oldumask);
            }

            //解码
            $decode = base64_decode(str_replace($result[1], '', $base64_image_content));
            if (file_put_contents('./' . $image_url, $decode)) {
                $data['code'] = 0;
                $data['imageName'] = $image_name;
                $data['image_url'] = $image_url;
                $data['type'] = $type;
                $data['msg'] = '保存成功！';
            } else {
                $data['code'] = 1;
                $data['imgageName'] = '';
                $data['image_url'] = '';
                $data['type'] = '';
                $data['msg'] = '图片保存失败！';
            }
        } else {
            $data['code'] = 1;
            $data['imgageName'] = '';
            $data['image_url'] = '';
            $data['type'] = '';
            $data['msg'] = 'base64图片格式有误！';
        }
        return $data;
    }

DestinyHunter / DestinyHunter.github.io

上传base64 分享图 #22