请给我一面红旗@微信官方

最新推荐文章于 2023-10-28 13:09:01 发布

ainiecao7019

最新推荐文章于 2023-10-28 13:09:01 发布

阅读量320

点赞数

原文链接：http://www.cnblogs.com/imMeya/p/11592078.html

版权

许多年前，小学生们转发QQ信息“今天是马化腾生日，只要复制转发此信息，就可以获得一个月qq会员“。现在，大家转发朋友圈“请给我一面国旗@微信官方” 重点是，上面的还是这群人！

emmmm，你还在艾特微信官方吗？？

国庆节还没有到，腾讯迎国庆换新颜活动却已经结束啦，好多小伙伴还没来得及换，应广大朋友的要求，我们就用canvas简单来实现一下吧~ 欢迎体验：给你的微信头像加个小红旗吧
 http://study.whosmeya.com/demo/canvas-image-concat.html

代码如下：

<body>
  <h3>请选择图片</h3>
  <input id="ipt" type="file" accept="image/*" mutiple="mutiple" />
  <h3>剪裁后图片</h3>
  <img id="imgCut" style="border: 1px solid rgba(0, 0, 0, 0.15);" />
  <h3>合成后图片(长按图片保存)</h3>
  <img id="imgConcat" style="border: 1px solid rgba(0, 0, 0, 0.15);" />
</body>

<script>
  window.onload = function () {
    const [w, h, s] = [150, 150, 3];  // 生成图片宽,  生成图片高,  生成图片放大倍数
    var ipt = document.getElementById('ipt');
    // 剪裁后原图
    var imgCut = document.getElementById('imgCut');
    imgCut.style.width = `${w}px`;
    imgCut.style.height = `${h}px`;
    // 剪裁后合成图
    var imgConcat = document.getElementById('imgConcat');
    imgConcat.style.width = `${w}px`;
    imgConcat.style.height = `${h}px`;
    // 合成画布
    var canvas = document.createElement('canvas');
    canvas.width = w * s;
    canvas.height = h * s;
    var ctx = canvas.getContext('2d');
    var reader = new FileReader();
    var img = new Image();  // 用户上传图
    var imgTop = new Image();  // 头像框图
    imgTop.src = '../images/national-flag.png';
    imgTop.setAttribute("crossOrigin", 'anonymous');
    img.addEventListener('load', function () {
      var iw = img.width;   // 用户上传图片宽
      var ih = img.height;  // 用户上传图片高
      var r = w / h;        // 目标图片宽高比
      // 计算裁剪
      var sx, sy, sWidth, sHeight;
      if (iw / ih > r) {
        sHeight = ih;
        sWidth = sHeight * r;
      } else {
        sWidth = iw;
        sHeight = sWidth / r;
      }
      sx = (iw - sWidth) / 2;
      sy = (ih - sHeight) / 2;
      ctx.fillStyle = '#ffffff';  // canvas 背景颜色
      ctx.drawImage(img, sx, sy, sWidth, sHeight, 0, 0, w * s, h * s);  // canvas添加用户图
      imgCut.src = canvas.toDataURL("image/png");
      ctx.drawImage(imgTop, 0, 0, w * s, h * s);  // canvas添加头像框图
      imgConcat.src = canvas.toDataURL("image/png");
    })
    reader.addEventListener('load', function (e) {
      img.src = e.target.result;
    })
    ipt.addEventListener('change', function (e) {
      reader.readAsDataURL(e.target.files[0]);
    })
  }
</script>