canvas生成遮罩图片
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();
};
- 图片的头信息必须设置允许跨域的头(Access-Control-Allow-Origin:*)
- 创建的image标签必须也能允许跨域(img.setAttribute(‘crossOrigin’, 'Anonymous'))
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 |
- 第一次由于没有安装jpeg导致处理jpg图片时,出现加载失败的提示,遇到这种情况可以检查自己的库依赖是不是没有安装完全;
- 第二次安装了jpeg的库之后,发现依然不行,最后发现问题在于我的jpeg的库是在我已经安装完成node-canvas之后才安装的
- 第三次把在mac安装好的node-modules复制到centos的服务器上,发现canvas不可以用。原因是他们的图片处理库不一样,必须重新安装node-canvas
- 合成图片的时候,如果需要移动、缩放或者旋转怎么处理?可以使用使用canvas的tranlate、scale、rotate进行完成,这里需要注意的是网页上的呈现效果和合成处理是否一致的问题。
- 前端合成多张遮罩图片的时候,不同的手机的兼容性问题
- 微信里的页面无法通过下载按钮,下载生成的图片;并且canvas.otDataURL()的图片无法长按保存
- 使用html2canvas将dom生成图片的时候,需要设置允许跨域,如果要使用proxy的话,可以参考进行实现。
- 另外html2canvas生成的canvas信息在上传base64的时候,可能出现413,body实体太大的提示,这时候需要检查服务器或者服务器语言的允许body的大小是否有限制。
canvas生成遮罩图片的更多相关文章
- Canvas 生成base64的PNG图片快照,So Amazing!!!
function canvasSupport(){ return Modernizr.canvas;}function callCanvasApps(){ var canvasOne=doc ...
- 小程序canvas生成二维码图片踩的坑
1:生成临时图片,保证画布被加载以及渲染(即本身不可以 hidden 或是 上级元素不可以 hidden 或是 wx:if 隐藏等) == > 建议:因为 canvas 的组件层级(z-inde ...
- 微信小程序利用canvas生成海报分享图片
一 . 效果 这是借用女神照生成的分享的海报,图片来自网络. 新增了poster组件和更新图片自适应 二 . 准备 准备两张图片连接,最好是自己开发账号验证的https图片链接. 三 . 实现思路 其 ...
- android 开发 对图片编码,并生成gif图片
demo场景: 将2张静态的png格式图片组合生成一个gif图片,间隔500毫秒,关键类:AnimatedGifEncoder 如需要解析gif获取每帧的图片,可参考上一篇博客:<android ...
- 使用pillow生成分享图片
重复性的工作一定要交给计算机去做! 有时候要为公司做一张宣传用的分享图片,很简单交给设计通过ps.AI做好就行了,但是如果一个网站要为每个用户生成一张专属的分享图片,如果让设计师一张一张的去做,哪设计 ...
- captcha.js一个生成验证码的插件,使用js和canvas生成
一.captcha`captcha.js`是一个生成验证码的插件,使用js和canvas生成的,确保后端服务被暴力攻击,简单判断人机以及系统的安全性,体积小,功能多,支持配置. 验证码插件内容,包含1 ...
- canvas生成海报
虽然之前也做过类似的生成海报的项目,但是这个项目我又网上查找了一下,发现一个插件挺好用的 html2canvas.js http://html2canvas.hertzen.com/这里可以下载这个 ...
- android 开发 View _12_ 用Canvas 绘制一张图片(博客中演示用Canvas画验证码图片)
package net.yt.yuncare.widgets; import android.graphics.Bitmap; import android.graphics.Canvas; impo ...
- 【转】DelphiXE10.2.3——跨平台生成验证码图片
原文地址 Java.PHP.C#等很容易在网上找到生成验证码图片的代码,Delphi却寥寥无几,昨天花了一整天时间,做了个跨平台的验证码,可以用在C/S和B/S端,支持Windows.Linux.An ...
随机推荐
- git查看某个文件的修改历史
<转自 http://www.cnblogs.com/flyme/archive/2011/11/28/2265899.html> 有时候在比对代码时,看到某些改动,但不清楚这个改动的作者 ...
- 小学生之SpringMVC
1. Springmvc是什么? Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思想,将web层进行职责解耦,基 ...
- repeater 分页显示数据
表名:ChinaStates 控件:Repeater 查询代码DA: public class ChinaStatesDA { private DataClassesDataContext Conte ...
- c# 字符串编码问题
一. ASCII码 我们知道,在计算机内部,所有的信息最终都表示为一个二进制的字符串.每一个二进制位(bit)有0和1两种状态,因此八个二进制位就可以组合出256种状态,这被称为一个字节(byte). ...
- nyoj 623
#include <iostream> using namespace std; int main() { int a[51][51],b[51][51],c[51][51],i,j,k, ...
- 杀掉linux所有进程的命令
ps -ef|grep 'opt/*/tomcat_ssi'|grep -v "grep"|awk '{print $2}'|xargs kill -9
- git add相关
git add -A stages All git add . stages new and modified, without deleted git add -u stages modified ...
- [转]PageRank算法
原文引自: 原文引自: http://blog.csdn.net/hguisu/article/details/7996185 感谢 1. PageRank算法概述 PageRank,即网页排名,又称 ...
- 《Linux内核分析》 week4作业-使用嵌入式汇编调用一个系统调用
一.fork的嵌入式汇编执行 #include <stdio.h> #include <unistd.h> int main(){ pid_t pid; asm volatil ...
- 思科27亿美元收购网络安全公司Sourcefire
据国外媒体报道,思科于今日宣布将以27亿美元的总价收购网络安全公司Sourcefire,以加强自身在网络安全业务领域的优势,该交易将于今年下半年完成. [IT商业新闻网讯](记者 张良)7月23日消息 ...