首先我们知道css3中增加了不少好用、好玩的css3样式可以使用。今天我们要说到是遮罩。
 
     它的使用方式也不复杂,和background使用方式差不多。使用mask-image就可以使用,这样就可以通过图片合成一张带有形状的合成图了,不需要直接使用PS处理了。CSS遮罩——如何在CSS中使用遮罩,这篇文章已经详细说明了遮罩如何使用了,我这里就不赘述了。今天我这里想要说明的是,如何通过这个完成生成一个合成图片的逻辑。
 
     它通过两种方式:前端JS+canvas,后端nodejs+canvas,完成基本思路是一样的,但是两种方式,后者的兼容性稍好一些。
 
     基础的图片合成,整体的思路是:首先按照遮罩层的大小,生成一张图片;其次把原图片按照一定的规则按照遮罩层大小剪切(drawImage)一张图片然后合成到遮罩层上面;最后一个非常重要设置是:globalCompositeOperation,设置图片合成时,组合操作。
 
     前端JS实现

utils.canvasMasking = function(img) {
var deferred = $.Deferred();
var newImg = document.createElement('img'); newImg.setAttribute('crossOrigin', 'Anonymous'); //解决跨域问题
newImg.src = img.src; //源图片加载失败
newImg.onerror = function() {
deferred.reject('源图片加载失败');
}; //源图片加载成功
newImg.onload = function() {
var imageWidth = img.width;
var imageHeight = img.height;
var mask = document.createElement('img'); mask.setAttribute('crossOrigin', 'Anonymous');
mask.src = img.getAttribute('data-mask'); //遮罩图片加载失败
mask.onerror = function() {
deferred.reject('遮罩图片加载失败');
}; //遮罩图片加载成功
mask.onload = function() {
var maskCanvas = document.createElement('canvas');
var maskContext = maskCanvas.getContext('2d'); var maskWidth = mask.width;
var maskHeight = mask.height; maskCanvas.width = maskWidth;
maskCanvas.height = maskHeight; /**
* 合并mask与处理后的原始图
*/
maskContext.drawImage(mask, 0, 0, maskWidth, maskHeight);
//将一个源(新的)图像绘制到目标(已有)的图像上
maskContext.globalCompositeOperation = 'source-in';
maskContext.drawImage(img, 0, 0, maskWidth, maskHeight); img.src = maskCanvas.toDataURL(); deferred.resolve(maskCanvas);
};
}; return deferred.promise();
};

  

     由于canvas是禁止跨域的,所以有两个条件可以进行控制:
  • 图片的头信息必须设置允许跨域的头(Access-Control-Allow-Origin:*)
  • 创建的image标签必须也能允许跨域(img.setAttribute(‘crossOrigin’, 'Anonymous'))
 
     大概实现过程如下:
 
     后端node实现
     
     后端实现的大致思路和前端js操作canvas基本上差不多。后端需要依赖node-canvas模块,提供与浏览器几乎完全一致的api,所以可以无缝切换。详细的实现说明同上,这里就不详细说明,主要说明的可能是node-canvas的安装和正常使用。
 
      因为是处理图片,所以对安装的环境有一些要求,相对比其它的模块要求稍高一些。首先他依赖Cairo。有一些依赖关系需要安装,主要是处理图片的库,看具体需求,主要有处理三种图片:png、jpeg、gif。
 
OS Command
OS X brew install pkg-config cairo libpng jpeg giflib
Ubuntu sudo apt-get install libcairo2-dev libjpeg8-dev libpango1.0-dev libgif-dev build-essential g++
Fedora sudo yum install cairo cairo-devel cairomm-devel libjpeg-turbo-devel pango pango-devel pangomm pangomm-devel giflib-devel
Solaris pkgin install cairo pkg-config xproto renderproto kbproto xextproto
Windows Instructions on our wiki
 
     上表的信息来自github
 
     这里我说明一下我踩过的坑:
  • 第一次由于没有安装jpeg导致处理jpg图片时,出现加载失败的提示,遇到这种情况可以检查自己的库依赖是不是没有安装完全;
  • 第二次安装了jpeg的库之后,发现依然不行,最后发现问题在于我的jpeg的库是在我已经安装完成node-canvas之后才安装的
  • 第三次把在mac安装好的node-modules复制到centos的服务器上,发现canvas不可以用。原因是他们的图片处理库不一样,必须重新安装node-canvas
 
     综上所述:安装node-canvas的前提条件是安装所有依赖的库文件,不同的环境下,需要重新下载node-canvas进行安装,原因是node-canvas每次都要编译一遍。
 
     另外一些题外的问题:
 
  1. 合成图片的时候,如果需要移动、缩放或者旋转怎么处理?可以使用使用canvas的tranlate、scale、rotate进行完成,这里需要注意的是网页上的呈现效果和合成处理是否一致的问题。
  2. 前端合成多张遮罩图片的时候,不同的手机的兼容性问题
  3. 微信里的页面无法通过下载按钮,下载生成的图片;并且canvas.otDataURL()的图片无法长按保存
  4. 使用html2canvas将dom生成图片的时候,需要设置允许跨域,如果要使用proxy的话,可以参考进行实现。
  5. 另外html2canvas生成的canvas信息在上传base64的时候,可能出现413,body实体太大的提示,这时候需要检查服务器或者服务器语言的允许body的大小是否有限制。
 
     我目前遇到一个问题:浏览器不同分辨率下展现的大小和我服务端生成的图片不一致?正在解决。。。
 
  2015-11-23 新增:效果页面
     
参考资料:
 

canvas生成遮罩图片的更多相关文章

  1. Canvas 生成base64的PNG图片快照,So Amazing!!!

    function canvasSupport(){     return Modernizr.canvas;}function callCanvasApps(){  var canvasOne=doc ...

  2. 小程序canvas生成二维码图片踩的坑

    1:生成临时图片,保证画布被加载以及渲染(即本身不可以 hidden 或是 上级元素不可以 hidden 或是 wx:if 隐藏等) == > 建议:因为 canvas 的组件层级(z-inde ...

  3. 微信小程序利用canvas生成海报分享图片

    一 . 效果 这是借用女神照生成的分享的海报,图片来自网络. 新增了poster组件和更新图片自适应 二 . 准备 准备两张图片连接,最好是自己开发账号验证的https图片链接. 三 . 实现思路 其 ...

  4. android 开发 对图片编码,并生成gif图片

    demo场景: 将2张静态的png格式图片组合生成一个gif图片,间隔500毫秒,关键类:AnimatedGifEncoder 如需要解析gif获取每帧的图片,可参考上一篇博客:<android ...

  5. 使用pillow生成分享图片

    重复性的工作一定要交给计算机去做! 有时候要为公司做一张宣传用的分享图片,很简单交给设计通过ps.AI做好就行了,但是如果一个网站要为每个用户生成一张专属的分享图片,如果让设计师一张一张的去做,哪设计 ...

  6. captcha.js一个生成验证码的插件,使用js和canvas生成

    一.captcha`captcha.js`是一个生成验证码的插件,使用js和canvas生成的,确保后端服务被暴力攻击,简单判断人机以及系统的安全性,体积小,功能多,支持配置. 验证码插件内容,包含1 ...

  7. canvas生成海报

    虽然之前也做过类似的生成海报的项目,但是这个项目我又网上查找了一下,发现一个插件挺好用的  html2canvas.js http://html2canvas.hertzen.com/这里可以下载这个 ...

  8. android 开发 View _12_ 用Canvas 绘制一张图片(博客中演示用Canvas画验证码图片)

    package net.yt.yuncare.widgets; import android.graphics.Bitmap; import android.graphics.Canvas; impo ...

  9. 【转】DelphiXE10.2.3——跨平台生成验证码图片

    原文地址 Java.PHP.C#等很容易在网上找到生成验证码图片的代码,Delphi却寥寥无几,昨天花了一整天时间,做了个跨平台的验证码,可以用在C/S和B/S端,支持Windows.Linux.An ...

随机推荐

  1. git查看某个文件的修改历史

    <转自 http://www.cnblogs.com/flyme/archive/2011/11/28/2265899.html> 有时候在比对代码时,看到某些改动,但不清楚这个改动的作者 ...

  2. 小学生之SpringMVC

    1. Springmvc是什么? Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思想,将web层进行职责解耦,基 ...

  3. repeater 分页显示数据

    表名:ChinaStates 控件:Repeater 查询代码DA: public class ChinaStatesDA { private DataClassesDataContext Conte ...

  4. c# 字符串编码问题

    一. ASCII码 我们知道,在计算机内部,所有的信息最终都表示为一个二进制的字符串.每一个二进制位(bit)有0和1两种状态,因此八个二进制位就可以组合出256种状态,这被称为一个字节(byte). ...

  5. nyoj 623

    #include <iostream> using namespace std; int main() { int a[51][51],b[51][51],c[51][51],i,j,k, ...

  6. 杀掉linux所有进程的命令

    ps -ef|grep 'opt/*/tomcat_ssi'|grep -v "grep"|awk '{print $2}'|xargs kill -9

  7. git add相关

    git add -A stages All git add . stages new and modified, without deleted git add -u stages modified ...

  8. [转]PageRank算法

    原文引自: 原文引自: http://blog.csdn.net/hguisu/article/details/7996185 感谢 1. PageRank算法概述 PageRank,即网页排名,又称 ...

  9. 《Linux内核分析》 week4作业-使用嵌入式汇编调用一个系统调用

    一.fork的嵌入式汇编执行 #include <stdio.h> #include <unistd.h> int main(){ pid_t pid; asm volatil ...

  10. 思科27亿美元收购网络安全公司Sourcefire

    据国外媒体报道,思科于今日宣布将以27亿美元的总价收购网络安全公司Sourcefire,以加强自身在网络安全业务领域的优势,该交易将于今年下半年完成. [IT商业新闻网讯](记者 张良)7月23日消息 ...