图片合成系列

2023/01/10 文章推荐 共 769 字,约 3 分钟

最近在做一个叫书封的项目,get到一些关于图片合成,滤镜的东西,记录一下

知识点

  1. 上传图片加水印,前后端都可以做,那么前端要怎么做呢?

小tips:使用canvas在前端实现图片水印合成

原理是:直接连续在使用drawImage()把对应的图片绘制到canvas画布上就可以,并借助canvas的toDataURL()方法把我们的canvas画布转换成base64无损PNG地址。

  1. 获取上传的时候图片信息,如何实现

a. 本地选择图片转化成base64地址,然后渲染到img上面,然后或者图片信息

inputFile.addEventListener('change', function (event) {
    var reader = new FileReader();
    var file = event.target.files[0];
    reader.onload = function(e) {
      var base64 = e.target.result;
          let image = new Image()
          image.src = base64
          image.onload = () => {
            const { width, height } = image
            const ratio = width / height
            console.log(width, height, '图片真实宽高') // 图片真实宽高
          }
    };
    reader.readAsDataURL(file);
});
  1. 前端图片合成也就是混合模式(也就是我们拼图时候说的特效)

CSS混合模式mix-blend-mode/background-blend-mode简介

深入理解CSS mix-blend-mode滤色screen混合模式

mix-blend-mode: 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

原来前端也能做这个事情,第一次在项目中使用,像玩ps一样,真有意思


在技术的历史长河中,虽然我们素未谋面,却已相识已久,很微妙也很知足。互联网让世界变得更小,你我之间更近。

在逝去的青葱岁月中,虽然我们未曾相遇,却共同经历着一样的情愫。谁的青春不曾迷茫或焦虑亦是无奈,谁不曾年少过

在未来的日子里,让我们共享好的文章,共同学习进步。有不错的文章记得分享给我,我不会写好的文章,所以我只能做一个搬运工

我叫 sunseekers(张敏) ,千千万万个张敏与你同在,18年电子商务专业毕业,毕业后在前端搬砖

如果喜欢我的话,恰巧我也喜欢你的话,让我们手拉手,肩并肩共同前行,相互学习,互相鼓励

文档信息

Search

    Table of Contents